JS笔记16（DOM&递归&查找元素）

一、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){代码段}

        自动跳过根节点，不能遍历层级不明确的数据