DOM

一、DOM Tree

    专门用来操作htnl页面内容的API，js的三个重要组成部分：ES(核心语法) DOM BOM

         使用原生js完成某个内容

 DOM W3C指定的标准

                                     DOM： 核心DOM   能够操作所有结构化文档 （HTML，XML）  万能 复杂  繁琐

                                     HTML DOM  专门操作HTML内容的API 常用的API进行简化 -- 简单   不是万能

                                     实际开发中：先用简单，如果简单的不能解决问题、实现不了在用核心DOM补充

                                     网页中一切在内存中都是以树形结构存储的 存储上下级包含关系最直观的结构

                                       HTML中的每一个元素：元素，属性，文本 都是一个节点对象（Node）  document对象是整棵树的根节点

 

 

节点对象（Node）三大属性

1、  nodeType number

9、document                     Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

1、element                        HTML 元素          

2、attribute                       属性

3、text                                文本

2、nodeName  节点名  字符串

         document   #document

         elsement          全大写的标签名

         attribute           属性名

         进一步区分元素的名称时候用

3、nodeValue   节点值

         document         null

         element            null

         attribute           属性值

         text                  文本的内容

 

 

 

二、节点

         什么是节点呢？

         根据DOM,XML文档中的每一个成分都是一个节点

         整个文档是一个文档节点 document

         标签是一个元素节点      document.getElementsByTagName(“body”)  这就是一个body节点

元素中的文本就是一个文本节点

每一个属性是一个属性节点    

注释是一个注释节点

 

三、节点的获取

         知道了什么是节点，那么我们要用节点来进行相关操作，比如找到一个

标签我们要给他增加属性，属性值，内容等，那么我们首先需要先找到这一个节点。

         同一个html页面内一个标签，属性，选择器可能存在多个，所以通过这些方式查找的内容通过一个类数组的方式放回，或者讲，只要有可能返回的是多个内容的可能，那么返回都是一个类数组来存这些内容，那么想要获得单个内容还得加上下标。

 

 

1、  通过标签名称来找节点。

var arr = document.getElementByTagName(“标签名”)[*];

2、  通过选择器获得节点

单个：var n = document.querySelector(“table>tbody tr:first-child>td:first-child”)

多个：var arr = document.querySelectorAll(“var n = document.querySelector(“table>tbody tr:first-child>td”)

”);

3、  通过id来获得节点

 var abc = document.getElementById(“id名”);

4、  通过类名来查找节点

var arr = document.getElementsByClassName(“类名”);

5、  通过name属性值来查找，一般不使用

var arr = document.getElementByName(“name的属性值”);

 

 

确定一个节点，通过关系查找其他节点

 

1、 三个元素不需要查找，直接获得

document.documentElement     html

document.head                                            head

     document.body                                              body

2、 节点之间的关系  node代表的是已经确定的节点对象

1） 父子关系

node.parentNode    获得node的父节点

var   tbody  = document.getElementsByTagName("tr")[0].parentNode;

 

       node. childNodes   获得node的所有子节点

var td = document.getElementsByTagName("tr")[0].childNodes;

   node.firstChild    获得node下的第一个子节点

            node.lastChild     后的node下最后一个子节点

2）兄弟关系

   node.preivousSibling: 返回当前节点的前一个兄弟节点

var  tr0 = document.getElementsByTagName("tr")[1].preivousSibling;

 

   node.nextSibling:返回当前节点的下一个兄弟节点

var  tr2 = document.getElementsByTagName("tr")[1].nextSibling;

 

            问题：网页中的一切都是节点，包括换行和空字符

3、 用元素树:仅包含元素节点的树结构  ---不是一颗新树 ，仅是节点数的子集

elem代表的是已经确定的节点

                            1）父子关系

                                     elem.parentElement    返回一个父元素对象（父节点）

                                     var tr = document.getElementsByTagName("tr")[0];

              var father = tr.parentElement;

                                     elem.childen IE8支持                 返回子元素对象集合

                                     elem.firstElementChild    返回第一个子元素对象

                                     elem.lastElementChild     返回最后一个子元素

                            2）兄弟关系

                                     返回当前节点的前一个兄弟元素

                                     elem.preivousElementSibling

                                     返回当前节点的下一个兄弟元素

                                     elem.nextElementSibling

 

                                     问题：IE9+支持

 

四、获得节点中的内容

      1、双标签中的内容增，删，改，查

              a)、查

                     var abc = node.innerHTML

              b)、改

                     node.innerHTML = “想要在标签中显示的内容”;

              c)、删

                     node.innerHTML =””;为空就是把标签中的内内容全给删完

              d)、增

                     node.innerHTML =node.innerHTML +”想要增加的内容”;  添加原有的内容的后面

2、单标签的内容 增、删、改、查  单标签内容一般存在value值里

a)        、查

var abc = node.value;

       b)、改

              node.value = “修改的内容”;

       c)、删

              node.value = “”   value的属性              值为空就删除了value这个属性值

       d)、增

              node.value = node.value+“增加的内容”;添加在原有的属性值后面

 

3、属性的 增， 删， 改， 查

a)、查 查的是属性值

var abc = node.getAttribute(“属性名”)

var abc = node.属性名

var abc = document.getElementsByTagName("input")[0].value;

b)、改

    node.属性名 = “要修改的内容”;

    node. setAttribute("原有属性","更改的属性值");

c)、删

    1、node.属性名 = “”  只删掉属性值

    2、node.RemoveAttribute("要删除的属性"); 这样会把属性名和属性值一起删掉

    3、node.RemoveAllAttributes(); 移除当前节点的所有属性和属性值

    4、node. setAttribute("原有属性","");

       d)、增

              node.要添加的属性名=“要添加的属性值”