DOM
DOM是Document Object Model的缩写即文档对象模型。
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，有浏览器厂商，用来操作html和xml功能的一类对象的集合。也有人称DOM是对html以及xml的标准编程接口。
html超文本标记语言：有固定的标签格式，用来定义网页的内容。
xml可扩展标记语言：可自定义标签格式，用来传送自定义数据使用。逐渐被JSON取代。
<div>DOM对象初步认识</div><script type = "text/javascript">//获取DOM对象，document 代表整个文档var div = document.getElementsByTagName('div')[0];//设置DOM对象的属性div.style.width = "100px";div.style.height = '100px';div.style.backgroundColor = 'green';//DOM对象事件绑定div.onclick = function(){if(this.style.backgroundColor == 'red'){this.style.backgroundColor = 'green';}else{this.style.backgroundColor = 'red';}}</script>
获取DOM对象的方法：
可通过名称，类型名，样式类名，id，遍历节点树等方式来获取元素。
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>获取DOM对象举例</title><style type="text/css">.css1{border:1px solid #ff0;}</style></head><body><div id = 'div1' name = 'only' class = 'css1'><!--注释节点--><strong>DOM对象初步认识</strong></div></body></html><script type = "text/javascript">//获取DOM对象，document 代表整个文档//var div = document.getElementsByTagName('div')[0];//通过元素类型名查找//var div = document.getElementById('div1');//通过元素ID查找，不常用（整合代码时ID会被后端程序修改）。//var div = document.getElementsByName('only')[0];//通过元素名查找。//var div = document.getElementsByClassName('css1')[0];//通过CSS类名查找//var div = document.querySelector('div.css1');//通过CSS选择器查找匹配的第一个元素。获取的是元素的快照，不实时。//var div = document.querySelectorAll('div.css1')[0];//通过CSS选择器查找所有符合的元素。获取的是元素的快照，不实时。var body = document.getElementsByTagName("body")[0];var strong = document.getElementsByTagName('strong')[0];//通过遍历DOM节点树查找元素//var div = strong.parentNode;//获取父节点var div = strong.parentElement;//获取父元素节点console.log(body.childNodes);//获取子节点，换行也算一个文本节点console.log(body.children);//获取元素子节点，换行也算一个文本节点console.log(strong);console.log(body);//设置DOM对象的属性div.style.width = "100px";div.style.height = '100px';div.style.backgroundColor = 'green';//DOM对象事件绑定div.onclick = function(){if(this.style.backgroundColor == 'red'){this.style.backgroundColor = 'green';}else{this.style.backgroundColor = 'red';}}</script>
节点的属性
nodeName - 元素的标签名，以大写形式标识，只读的。nodeValue - Text节点或Comment节点的文本内容，可读写。nodeType - 节点的类型，只读。attributes - Element 节点的属性集合节点的方法
Node.hasChildNodes();是否有子节点。节点的类型
元素节点 - 1属性节点 - 2文本节点 - 3注释节点 - 8document - 9DocumentFragment - 11<h1>遍历节点</h1><div><!--注释节点--><strong>strong</strong><span>span</span><div name='childName' id ='childId'>div</div><input type="button" value="button"/></div><script type = "text/javascript">var div = document.getElementsByTagName('div')[0];for (let index = 0; index < div.children.length; index++) {const element = div.children[index];console.log(index,element.nodeName,element.nodeType,element.nodeValue);}//遍历子节点，输出节点的属性for (let index = 0; index < div.childNodes.length; index++) {const node = div.childNodes[index];console.log(index,node.nodeName,node.nodeType,node.nodeValue);}</script>
节点的增删改
<h1>节点增删改</h1><div><!--注释节点--><strong>strong</strong><span>span</span><div name='childName' id ='childId'>div</div><input type="button" value="button"/></div><script type = "text/javascript">var div = document.getElementsByTagName('div')[0];var div1 = document.createElement("div"); //- 创建元素节点div1.innerHTML = 'new div';var text1 = document.createTextNode("text"); //- 创建文本节点text1.nodeValue = "text1";var comment1 = document.createComment("comment"); //- 创建注释comment1.nodeValue = 'comment1'var doc = document.createDocumentFragment("fragment");//创建文档碎片doc.appendChild(document.createElement("div"));// //插入元素节点div.appendChild(div1);//如果选中的是已存在的元素，将会移动元素到新位置。div.appendChild(text1);div.insertBefore(comment1,div1);div.insertBefore(doc,div1);//删除元素节点div.removeChild(comment1);//返回删除的节点text1.remove();//无返回//替换节点var comment2 = document.createComment("comment");comment2.nodeValue = "replaceChild div1";div.replaceChild(comment2,div1);</script>
元素节点的属性和方法
<h1>元素节点属性和方法</h1><div><!--注释节点--><strong>strong</strong><span>span</span><div name='childName' id ='childId'>div</div><input type="button" value="button"/></div><script type = "text/javascript">var strong = document.getElementsByTagName('strong')[0];strong.innerText = "new strong";//设置文本值var div = document.getElementsByTagName('div')[0];div.innerHTML = 'new div';//设置html代码div.setAttribute("id",'only');//设置属性值console.log(div.getAttribute('id'));//读取属性值</script>
DOM继承树
node Document HTMLDocumentCharacterData TextCommentElement HTMLElementHTMLHeadElement·HTMLBodyElementHTMLTitleElementHTMLParagraphElementHTMLinputElementHTMLTableElement...ect.Attr封装insertAfter();类似insertBefore();
<h1>insertAfter</h1><div><!--注释节点--><strong>strong</strong><span>span</span><div name='childName' id ='childId'>div</div><input type="button" value="button"/></div><script type = "text/javascript">//实现在元素节点后添加新节点Element.prototype.insertAfter = function(targetNode,afterNode){var beforeNode = afterNode.nextElementSibling;if(beforeNode == null){this.appendChild(targetNode);}else{this.insertBefore(targetNode,beforeNode);}}var div = document.getElementsByTagName("div")[0];var newNode = document.createElement('p');var strong = document.getElementsByTagName('strong')[0];var input = document.getElementsByTagName('input')[0];console.log(strong);div.insertAfter(newNode,strong);</script>
倒序排列元素节点
<h1>倒序排列节点</h1><div><!--注释节点--><strong>strong</strong><span>span</span><div name='childName' id ='childId'>div</div><input type="button" value="button"/></div><script type = "text/javascript">var div = document.getElementsByTagName('div')[0]//倒序排列元素节点var len = div.children.length;for (let i = len-1; i >= 0; i--) {div.appendChild(div.children[i]);}</script>
