DOM查找与操作（document)_js

Posted 2021-03-01 陈小赞

一、DOM操作

DOM就是document操作，就是找到对应需要操作的html标签

二、查找获取标签

1、直接查找

document.getElementById  根据标签id属性查找

document.getElementsByName  根据标签的name属性进行查找

document.getElementsByClassName 根据class属性进行查找

document.getElementsByTagName  根据标签名进行查找

2、间接查找

parentElement  父节点标签

chlidren：所有子标签

firstElementChild 第一个字标签

lastElementChild  最后一个子标签

nextElementSibling  下一个兄弟标签

previousElementSibling  上一个兄弟标签

 

 

三、操作标签

1、文本操作

tag.innerText   操作文本内容

tag.innerHtml  操作内部所有内容

tag.value  操作标签的value值

2、样式操作

tag.className="" 直接对整体进行操作

tag.classList  对class的列表操作

　　tag.classList.add(\'样式名\')  添加样式

　　tag.classList.remove(\'样式名\')  删除样式

3、style操作

tag.style.fontSize=\'16px\'  直接对style属性操作

4、属性操作

tag.setAttribute(\'属性名\',\'属性值\')  添加属性

tag.getAttribute(\'属性名\')  获取属性

tag.removeAttribute(\'属性名\')  删除属性

tag.attributes 获取所有属性

 5、创建标签，并添加到html中

　　两种创建方式：

　　（1）直接编写需要添加的标签的html，然后添加

　　function addEle() {
    　　var tag=\'<p><input type="text"></p>\'
     　　document.getElementById(\'i1\').insertAdjacentHTML("beforeEnd",tag)

　　}
　　addEle()
　　注：insertADjacentHTML的第一个参数只能是：beforeBegin、afterBegin、beforeEnd、afterEnd

　　（2）对象方式
　　

　　function addEle2() {
    　　var tag=document.createElement(\'input\')
    　　tag.setAttribute(\'type\',\'text\');
　　　　tag.style.fontSize="16px";
    　　var p=document.createElement(\'p\');
    　　p.appendChild(tag);
    　　document.getElementById(\'i1\').appendChild(p);

　　}
　　addEle2()