一、引入标签
引入方式: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)