一、DOM
1、什么是DOM
Document Object Model(文档对象模型):提供了操作网页文档的API
分为核心DOM&HMTL DOM &XML DOM
DOM树,树根document,由浏览器的js解释器创建,可以通过树根找到每一个dom元素或对象或节点
2、dom元素的三大属性
1、xx.nodeType:获取节点的类型,会返回一个数字
document节点:9
element节点:1
attribute节点:2
comment注释节点:8
text文本节点:3
2、xx.nodeValue:只能获取属性节点的值,
3、xx.nodeName:说去节点或标签的名称,返回的是一个大写的标签名,可以用来判断是什么标签
3、查找元素
通过dom树查找元素:
var newD=document.getElementsByTagName('标签名')
var newD=document.getElementsByClassName('类名')
var newD=document.getElementsById('id名')
通过关系查找元素
父:xx.parentNode;
子:xx.children;
第一个儿子:xx.firstElementChild;
最后一个儿子:xx.lastElementChild;
前一个兄弟:xx.previousElementSibling;
下一个兄弟:xx.nextElementSibling;
通过HTML属性查找
var elem=document.getElementById("id");
var elems=document.getElementsByTagName("标签名");
var elems=document.getElementsByClassName("类名");
var elems=document.getElementsByName("name值");
通过CSS选择器查找
var elem=document.querySelector("任意css选择器");--只会返回找到的第一个
var elems=document.querySelectorAll("任意css选择器");--返回多个
4、递归
深度优先,优先遍历当前节点的子节点,子节点遍历完才会调到兄弟节点
<script>
//两种递归方式
let bds=document.getElementsByTagName('body')[0];
let zdy=bds.getElementsByClassName('section3')[0];
//传入的是根节点
function gets(root){
console.log(root)
//循环根节点的儿子集合
for(var x=0;x<root.children.length;x++){
if(root.children[x].nodeName=="DIV"){
root.children[x].style.border="2px dotted green";
}else{
root.children[x].style.border="2px dotted red";
}
gets(root.children[x])
}
}
gets(zdy);
for(var i=0;i<bds.children.length;i++){
// console.log(bds.children[i].nodeName)
var ch=bds.children[i];
if(ch.nodeName=="FOOTER"){
// console.log(ch)
ch.style.background="red"
}else if(ch.nodeName=="NAV"){
ch.style.border="2px solid green"
}else if(ch.nodeName=="SECTION"||ch.nodeName=="DIV"){
ch.style.border="2px solid green";
ch.style.background="rgba(0,0,0,.2)"
}
}
</script>
5、遍历API:TreeWallker
创建TW:var tw=document.createTreeWallker(根元素,NodeFilter.SHOW_ELEMENT)
调用:while(node=tw.nextNode()!=null){代码段}
自动跳过根节点,不能遍历层级不明确的数据