dom对象处理

什么是DOM?

DOM是W3C标准（是HTML文档对象模型的英文缩写，Document Object Model for HTML）。
DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。
通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
DOM独立于平台和编程语言。它可被任何编程语言诸如Java、JavaScript和VBScript使用。

什么是DOM树？

DOM定义了访问和操作HTML文档的标准方法。
DOM将HTML文档表达为树结构。

---

理论说多了都会蒙，直接上码。

如何查看DOM节点树？

<script>
    console.log(document);
</script>

有人以为自己是不是眼花了，其实DOM树就这么简单，果断去按F12查看console打印信息吧（记得点小三角展开哦）。

如何查看DOM渲染树？

用一句话概括就是：DOM渲染树就是DOM节点树中，用于浏览器展示出来的那部分节点（例如：含有样式display:none的节点就不在渲染树上面）。
另外一种直观的说法就是：只要是在浏览器上能直接看得到的元素节点都是DOM渲染树上的节点。

如何操作DOM？

还记得前面的理论介绍说“DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法”。
那么，就让我们来看看这些常用的操作吧！

获取页面元素

    document.getElementById(string) //返回对拥有指定id的第一个对象的引用。
    document.getElementsByName(string) //返回带有指定名称的对象集合。
    document.getElementsByTagName(string) //返回带有指定标签名的对象集合。
    document.getElementsByClassName(string) //返回文档中所有指定类名的元素集合。
    //新增
    document.querySelector(string); //string:接收css选择器，只返回第一个元素
    document.querySelectorAll(string); //string:接收css选择器，返回所有符合条件的元素

创建页面元素

document.creatElement(string) //创建一个html元素,string需要创建的元素名称
//例如：
var nodeElementButton = document.createElement('button'); //创建一个button元素

元素对象属性一

记住：看看就好，除了前面5个，其他的几乎用不着，如果非要用，你还不如用jQuery封装过的。

<div class="wrap">
    <div>prev element</div>
    <div id="box" class="box" title="title text" style="color: red;">
        <h4>title</h4>
        <p>Lorem ipsum dolor.</p>
        <button>sure</button>
    </div>
    <div>next element</div>
</div>
<script>
    var box = document.getElementById('box');
    console.log(box.style); //……，style设置或返回元素的style属性。
    console.log(box.innerHTML); //……，innerHTML设置或返回元素的内容，包括html标记。
    console.log(box.innerText); //……，innerText用于设置元素的文本内容。
    console.log(box.className); //……，className用于设置或返回元素的class属性。
    console.log(box.id); //……，id用于设置或返回元素的id属性。
    console.log(box.childNodes); //……，childNodes属性返回节点的子节点集合，以NodeList对象。
    console.log(box.nodeName); //……，nodeName返回元素的名称。
    console.log(box.parentNode); //……，parentNode返回元素的父节点。
    console.log(box.tagName); //……，tagName返回元素的标签名，通常为大写英文。
    console.log(box.title); //……，title用于设置或返回元素的title属性。
    console.log(box.firstChild); //……，firstChild返回元素的首个子元素。
    console.log(box.lastChild); //……， lastChild返回元素的最后一个子元素。
    console.log(box.nextSibling); //……， nextSibling返回位于同一节点树层级的下一个节点。
    console.log(box.previousSibling); //……，previousSibling返回位于同一节点树层级的前一个节点。
 </script>

元素对象属性二

注意：这几个家伙还是蛮重要的，强迫自己记一下吧。

<div class="wrap">
    <div>prev element</div>
    <div id="box" class="box" title="title text" style="color: red;">
        <h4>title</h4>
        <p>Lorem ipsum dolor.</p>
        <button>sure</button>
    </div>
    <div>next element</div>
</div>
<script>
    var box = document.getElementById('box');
    console.log(box.clientHeight);//返回元素的可见高度，即clientHeight=height+padding，不包括滚动条和边框。
    console.log(box.clientWidth); //返回元素的可见宽度，即clientWidth=width+padding，不包括滚动条和边框。
    console.log(box.offsetHeight); //返回元素的高度，即offsetHeight=height+padding+scrollbar（滚动条）+border。
    console.log(box.offsetWidth); //返回元素的宽度，即offsetWidth=width+padding+scrollbar（滚动条）+border。
    console.log(box.offsetTop); //返回元素垂直偏移的位置，获取对象相对于版面或由offsetParent属性指定的父坐标的顶部位置。
    console.log(box.offsetLeft); //返回元素水平偏移的位置
    console.log(box.offsetParent); //指的是最近的定位祖先元素。如果没有祖先元素是定位的话，会指向body元素。
    console.log(box.scrollTop); //返回元素上边缘与视图之间的距离。
    console.log(box.scrollLeft); //返回元素左边缘与视图之间的距离，获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置。
</script>

元素对象方法

注意：看看就好，不要求记住，留个印象，因为jQuery对这些进行了封装。

     box.appendChild(); //向元素添加新的子节点，作为最后一个子节点
     box.cloneNode(); //克隆元素
     box.getAttribute(); //返回元素节点的指定属性值
     box.getAttributeNode(); //返回指定的属性节点
     box.getElementsByTagName(); //返回拥有指定标签名的所有子元素的集合
     box.hasAttribute(); //如果元素拥有指定属性，则返回true，否则返回false
     box.hasAttributes(); //如果元素拥有属性，则返回true，否则返回false
     box.hasChildNodes(); //如果元素拥有子节点，则返回true，否则返回false
     box.insertBefore(); //在指定的已有的子节点之前插入新节点
     box.removeAttribute(); //从元素中移除指定的属性
     box.removeAttributeNode(); //移除指定的属性节点，并返回被移除的节点
     box.removeChild(); //从元素中移除子节点
     box.replaceChild(); //替换元素中的子节点
     box.setAttribute(); //给指定的元素设置或更改为指定值
     box.setAttributeNode(); //设置或更改指定属性节点
     box.toString(); //把元素转换成字符串