DOM

DOM 文档对象模型
DOM 赋予我们操作页面的能力
可以通过DOM,创建,插入,修改,删除页面元素等等.
获取页面中的内容其实都是字符串,js把把这些字符串解析成DOM树
DOM树会把字符转换为节点,我们操作的根本就是节点

        获取节点:
            1.document.getElementById()
                根据元素的id值获取一个元素,因为id是唯一的
                主语: document
            2.getElementsByTagName()
                根据元素标签名获取一组元素
                主语:
                    document
                    父级节点
            3.getEelementsByClassName()
                根据元素的class属性值获取一组元素
                主语:
                 document
                 父级节点
            4.getEelementsByName()
                根据元素的name属性值获取一组元素
                主语: document

创建节点: createEelement
作用: 通过标签名创建一个元素
语法: document.createEelement(“标签名”)
主语: document
参数: 标签名
返回值: 创建的节点
注意 :只能创建元素节点,注释节点无法创建

     插入节点
     appendChild(子节点)
     追加节点(最后)
     主语:
                    父节点
                指定位置插入节点
     insertBefore(节点1,节点2)
                参数:
                    第一个:要插入的节点
                    第二个:参考位置

间接差找节点

childNodes返回元素的一个子节点的数组
firstChild返回元素的第一个子节点
firstElementChild 返回第一个元素子节点
lastChild返回元素的最后一个子节点
nextSibling返回元素的下一个兄弟节点
parentNode返回元素的父节点
previousSibling返回元素的上一个兄弟节点

替换节点

语法:
父级.replaceChild(node,childNode)

window.onload =function(){
            var ul = document.getElementsByTagName("ul")[0];
            var lis = document.getElementsByTagName("li");

            //创建一个新节点
            var li = document.createElement("li");
            //li.innerHTML = "while";
            //li.innerText = "black";

            //innerHTML 与  innerText 区别:
           // li.innerHTML = "<h3>while</h3>"; //可以识别html标签结构
            li.innerText = "<h3>while</h3>"; //不识别标签,只识别文本

            //替换
            var result = ul.replaceChild(li,lis[1]);
            console.log(result);

克隆节点 cloneNode

	//克隆
	 var newNode = ul.cloneNode(true);
	 console.log(newNode);
	
	 document.body.appendChild(newNode);