DOM常用节点操作总结及解释

一、引入标签

引入方式：document.引入标签函数("标签名[选择器名称用css内的格式]")

1.querySelector(获取第一个节点)；

2.querySeletorAll(获取指定选择器组的所有节点集合)；

3.getElementById(获取指定id的节点)；

4.getElementByTagName(获取指定标签节点集合div、p、span等)

二、函数方法

引入方式：document.querySeleter("span").函数方法

1.innerHTML; 返回标签内的文本和标签，字符串类型

2.parentNode； 返回指定节点父节点

3.children; 返回指定元素子节点集合

4.fistElementChild; 返回指定元素的第一个子节点

5.lastElementChild 返回指定元素的最后一个子节点

三、DOM修改

1.innerHTML； 可通过赋值来修改元素中的内容，若包含html字符串会被解析位html元素

document.querySelector('p').innerHTML='<span>啊哦</span>'

2.setAttribute(name,value); 设置元素的属性，若存在，则更新，若不存在则添加新的属性

document.querySelector('input').setAttribute('type','button')；//代表更新type=button

3.通过属性名更改

docment.querySelector('input').type = 'button';

四、DOM添加

1.createElement(tageName);创建一个标签名称，tagName为HTML元素

  newDiv=document.createElement('div');//创建一个div标签

2.appendChild(node);将一个节点插入到指定父节点的子节点列表末尾处 

 var p =document.creareElement('p');//创建一个p标签
 document.querySelector('div').appendChild(p);//p标签被添加到div标签的后面

3.insert Adjacent HTML(position,text);将指定文本解析为HTML字符串，插入指定位置（IE不友好）

五、DOM删除

1.removeChild(child);删除选定子节点，需要指定父级

<div>
    <p>项目1</p>
    <p>项目2</p>
</div>
<script>
    var P= document.querySelector('div');
    var child = document.Selector('p');//获取第一个p标签
    parent.removeChild(child);//删除第一个p标签

</script>

2.remove();删除选定子节点

<div>
    <p>项目1</p>
    <p>项目2</p>
</div>
<script>
    var p1=document.querySelector('p');//获取第一个p标签
    p1.remove();//删除获取的p标签
</script>

六、DOM控制CSS样式

1.通过style属性控制样式

var box= document.querySelector('div');
box.style.color = '#fff';//改变文本颜色
box.style.marginLeft='100px';//设置左边距

2.通过classList控制样式

add(class1,class2,....);//添加一个或多个类名
remove(class1,class2,....);//移除一个或多个类名
replace(oldClass,newClass);//替换类名
contains(class);//判断类名是否存在，返回布尔值
toggle(class,true|false);//若类名存在，则移除，否则添加，第二个参数代表：无论是否存在类名，强制添加（true）或删除（false）