dom

dom树

例如 a 里面的 href 就是一个书的节点
dom 树里面所有的内容都可以看成是一个单个的对象

六、DOM

1. DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape 及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

2. 因为操作DOM代价高昂，所以现代Web前端开发中，尽量不直接操纵DOM。

1. DOM常用的操作方法（原生）

1. 获取元素

   • document.getElementById()
   • document.getElementsByTagName()
   • document.getElementsByName()
   • document.getElementsByClassName()
   • document.querySelector()
   • document.querySelectorAll()
   • document.boby // get Boby elements
   • document.documentElements // get html e

2. 添加元素

   • Node.appendChild()
   • Node.insertBefore()
   • Element.insertAdjacentHTML()

3. 删除元素

   • Node.removeChild()
   • Node.replaceChild()

4. 修改元素

   • Element.getAttribute()
   • Element.setAttribute()
   • Element.removeAttribute()
   • Element.innerHTML

5. 创建元素

   • document.createElement()

6. 判断某个节点是不是另一个节点的后代（返回值是布尔值）

   • Node.contains()

2. DOM中元素的常用属性

1. childNodes

   • 每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。 NodeList 是一种类数组
     对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
   • 某个节点下的所有子节点。

2. parentNode

   • 每个节点都有一个 parentNode 属性，该属性指向文档树中的父节点。包含在 childNodes 列表中
     的所有节点都具有相同的父节点，因此它们的 parentNode 属性都指向同一个节点。

3. parentElement

   • 父元素，节点类型为Element。

4. children

   • 这个属性是 HTMLCollection 的实例，只包含元素中同样还是元素的子节点。

5. hidden

   • 元素是否隐藏，默认是false，不隐藏。

6. id

   • 元素的id属性。

7. className

   • 元素的class属性。

8. innerHTML

9. innerText

3. HTML5新增的API

1. 自定义属性

   • HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。例如：
     <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

   • 添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对儿的映射。在这个映射中，每个 data-name 形式的属性都会有一个对应的属性，只不过属性名没有 data- 前缀（比如，自定义属性是 data-myname ，那映射中对应的属性就是 myname ）。

        //本例中使用的方法仅用于演示
        var div = document.getElementById("myDiv");
        //取得自定义属性的值
        var appId = div.dataset.appId;
        var myName = div.dataset.myname;
        //设置值
        div.dataset.appId = 23456;
        div.dataset.myname = "Michael";
        //有没有"myname"值呢？
        if (div.dataset.myname){
          alert("Hello, " + div.dataset .myname) ;
        }
     

   • 注意：如果属性名称中还包含连字符(-)，在dataset属性获取时需要转成驼峰命名方式。

2. 元素的 classList 属性

   • 新的元素属性，用来操作元素的class，非常方便。还支持下面的方法：
     • add(value)
       将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
     • contains(value)
       表示列表中是否存在给定的值，如果存在则返回 true ，否则返回 false 。
     • remove(value)
       从列表中删除给定的字符串。
     • toggle(value)
       如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。