15. DOM节点

BOM: 浏览器对象模型 将浏览器的每一部分都转换成js对象 操作浏览器部分功能的API

DOM：文档对象模型 DOM元素可以理解为是把html元素转换成了js对象 操作网页上的元素的API

DOM节点的最终目的是通过js的语法来操作对应的html元素

解析过程：
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树

属性的读写

1. 普通属性

   点方法

   对象.属性

   //a.dom普通属性
   // var oBox = document.querySelector("#box");
   // // 1.点运算: 对象.属性
   // 读
   // console.log(oBox.id);
   // 写
   // oBox.id = "heihei";

2. style属性

   dom对象.style.子属性名

   var oBox = document.querySelector("#box");
   // oBox.style.backgroundColor = "hotpink";

3. offset属性

   getAttribute/setAttribute

JS中的父子兄访问关系

节点的访问关系都是属性

获取父节点

	节点.parentNode

获取兄弟节点

	下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

前一个节点 | 前一个元素节点：

前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

获得任意一个兄弟节点

	节点自己.parentNode.children[index];  //随意得到兄弟节点

获取单个的子节点

	第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

最后一个子节点 | 最后一个子元素节点**：

	最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

获取所有的子节点

childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）

	子节点数组 = 父节点.childNodes;   //获取所有节点。

children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】

    子节点数组 = 父节点.children;   //获取所有节点。用的最多。

DOM节点的操作

节点的操作都是函数（方法

创建节点

	新的标签(元素节点) = document.createElement("标签名");

插入节点

    父节点.appendChild(新的子节点);

删除节点

	父节点.removeChild(子节点);

用父节点删除子节点。必须要指定是删除哪个子节点

获取节点的属性值

    元素节点.属性名;
	元素节点[属性名];

	元素节点.getAttribute("属性名称");

设置节点的属性值

方式1举例：（设置节点的属性值）

    myNode.src = "images/2.jpg"   //修改src的属性值
    myNode.className = "image2-box";  //修改class的name

方式2：

	元素节点.setAttribute("属性名", "新的属性值");

    myNode.setAttribute("src","images/3.jpg");
    myNode.setAttribute("class","image3-box");
    myNode.setAttribute("id","你好");

删除节点的属性

	元素节点.removeAttribute(属性名);

    myNode.removeAttribute("class");
    myNode.removeAttribute("id");

innerHTML：双闭合标签里面的内容（包含标签）

最常见的操作,用字符串拼接页面

var oUl = document.querySelector("ul");

oUl.innerHTML = "<li class='test'>嘤嘤嘤</li>";

 for(var i=0; i<10; i++){

    oUl.innerHTML += "<li>"+i+"</li>";

    oUl.innerHTML += `<li>${i}</li>`;

}