DOM

…document object model 文档对象模型，由w3c制定标准

获取元素节点(2、3条可以通过任意元素对象去调用)

1. document.getElementById(“id名”)

获取id名所在的元素，返回值为元素对象或者null

2. getElementsByClassName(“class名”)

获取到类名所在的元素组成的类数组。通过索引操作具体元素对象。返回值为类数组或者[]。

3. getElementsByTagName(“标签名”)

获取到标签名所在的元素组成的类数组。通过索引获取到具体的元素

4. document.getElementsByName(“名字”)

获取到表单名字所在的元素组成的类数组

5. 获取body及html

document.body          获取body
document.documentElement   获取html

利用节点关系获取其它节点

三大节点的三大属性

1. 元素节点

nodeType 1
nodeName 元素名大写
nodeValue null

2. 属性节点

nodeType 2
nodeName 属性名
nodeValue 属性值

3. 文本节点

nodeType 3
nodeName #text
nodeValue 文本内容

节点的增删改查

1. 节点的创建

  (1) document.createElement(“标签名”)

创建一个元素节点

  (2) document.createTextNode(“文本”)

创建文本节点(了解)

  (3) document.createAttribute(“属性名”)

创建一个属性节点(了解)

2. 节点的插入

  (1) 父节点.appendChild(子节点)

往父元素节点插入最后一个子节点

  (2) 父节点.insertBefore(子节点,页面已存在的)

在指定的子节点node前插入新的子节点new。

  (3) 父节点.setAttributeNode(属性节点)

在指定元素中插入一个属性节点（了解）

3. 节点的删除、复制、查找

  (1) 父节点.removeChild(ele)

父节点删除子节点

  (2) 当前节点.cloneNode(boolean)

复制节点，boolean为true是深复制。返回值为复制后的新节点

  (3) 父节点.hasChildNodes()

判断当前节点是否拥有子节点,返回布尔值当有参数时判断是否有这个子节点

节点的属性及方法

• 节点是对象，给对象添加属性与给html元素添加属性不是一个意思。
• html标准属性会互相影响，但是不是标准的属性不会互相影响。

1. 节点(对象)的属性

  (1) tagName 获取元素元素的标签名

  (2) className 设置/获取元素的class属性

  (3) id 设置/获取元素id属性

  (4) name 设置/获取元素name属性

  (5) style 设置/获取元素的内联样式

  (6) innerHTML 设置/获取元素的内容（包含html代码）

  (7) innerText 设置或获取位于元素标签内的文本


2. 节点的方法

  (1) setAttribute(“html属性”,“属性值”)   给html元素添加属性

  (2) getAttibute(“html属性”)       拿到html属性对应的属性值

  (3) ele.removeAttribute(attr)      删除html属性

  (4) ele.hasAttribute(attr)        判断是否存在html属性

3. 节点的盒模型相关的属性

  (1) offsetWidth   当前元素的宽度（border + padding + content）

  (2) offsetHeight   当前元素的高度

  (3) offsetLeft    当前元素离**<定位父级>**元素左边的距离。

  (4) offsetTop    当前元素离**<定位父级>**元素顶部的距离。

    若不在定位父级，则相对于html的距离

4. 操作css样

  (1) style只能操作内联样式

  (2) window.getComputedStyle(ele) 得到包含ele所有样式的对象

  (3) ele.currentStyle 得到包含ele所有样式的对象（支持IE8以下浏览器）

    currentStyle不能获得总属性




html结构与dom节点属性的共同点与不同点如下图：





节点的关系





dom_tree