js DOM对象

DOM

1.    什么是DOM

a)    Document  Object Model缩写，文档对象模型，用来操控HTML文档即文档内元素

b)    document对象是DOM的一个实例化对象，代表HTML文档，可以通过document对象的属性和方法 来操控文档以及元素，注意该对象不需要创建

c)     DOM认为HTML文档即文档元素都可以看做是节点（node），常用节点如下

l  元素节点：就是HTML标签

l  属性节点：HTML属性

l  文本节点：标签中的文本内容

l  注释节点：注释

l  文档节点：HTML文档

2.    节点所具有的属性：nodeType、nodeName、nodeValue

a)    节点类型nodeType

l  元素节点值为1

l  属性节点值为2

l  文本节点值为3

l  注释节点值为8

l  文档节点值为9

b)    节点名称nodeName

l  元素节点值为元素名称

l  属性节点值为属性名称

l  文本节点值为#text

l  注释节点值为#comment

l  文档节点值为#document

c)     节点值nodeValue

l  元素节点值为null

l  属性节点值为属性值

l  文本节点值为文本

l  注释节点值注释内容

l  文档节点值为null

3.    如何获取元素节点

a)    方法1：document.getElementById通过节点的ID获取，值为唯一值

b)    方法2：document.getElementsByTagName(“节点名”)通过节点名称获取，注意

l  返回值为一个数组，可以通过下标来获取对应节点

l  如果参数为*，那么代表的是文档中所有元素

l  参数不区分大小写

c)     方法3：document.getElementsByName(“name名称”)通过节点的name属性获取，注意

l  返回值为一个数组

l  常用于获取表单元素

d)    方法4：document.getElementByClassName(“类名”);通过节点的类名获取，注意该方法或新增方法，在某些浏览器中不兼容，返回值为获取到的节点所形成的数组、

4.    如何获取和操作元素节点的内容

a)    innerHTML：获取元素节点的所有子节点即内容

b)    innerText：获取元素节点中的文本内容，不包含子节点

c)     outerHTML：获取到的值包含自身及所有子节点以及内容

5.    如何获取属性节点：可以使用attributes属性，值为元素的所有属性，格式：元素节点.attributes，注意他的返回值为对象，可以通过下标获取对象的属性节点

6.    如何获取及操作属性节点的值

a)    方法1：可以使用如下格式：节点.属性名

b)    方法2：

l  获取：使用getAttribute获取属性值，格式：元素节点.getAttribute(“属性名”)

l  修改：使用setAttribute设置（修改）属性值，格式：元素节点.seAttribute(“属性名”, “属性值”);

c)     方法3：利用attributes属性来操作

l  获取：元素节点.attributes[下标].nodeValue

l  修改：元素节点.attributes[下标].nodeValue = “值”;

7.    获取即操作属性节点属性值的方法的区别

a)    方法1：不支持自定义属性

b)    方法2：支持自定义属性

8.    属性节点获取的注意事项：如果要获取一个属性节点的class，那么需要使用className而不是直接用className

9.    文档节点：所谓文档节点就是指HTML文档，获取document

10.  节点关系

a)    根节点：document.documentElement

b)    body节点：document.body

c)     父节点：parentNode，获取父节点

d)    子节点：childNodes，结果为有所有子节点所形成的数组

e)    第一个子节点：firstChild，获取一个节点的第一个子节点

f)     最后一个子节点：lastChild，获取一个节点的最后一个子节点

g)    前一个兄弟节点：previousSibling

h)    后一个兄弟节点：nextSibling

11.  用DOM操作CSS样式

a)    行内样式：值可以读写

l  读：元素节点.style.属性，值为字符串类型

l  写：元素节点.style.属性 = “值”

l  注意：元素节点.style是一个用于存储CSS元素的对象

b)    内部样式：内部样式表的属性值是只读的

l  获取IE浏览器下面的CSS样式：document.currentStyle

l  获取谷歌、火狐等浏览器下面的CSS样式：window.getComputedStyle(“元素节点”, null)

l  兼容格式：

1.     格式1：var sty = 元素节点.currentStyle  || window.getComputedStyle(元素节点,null);

2.     格式2：

function  fn(元素节点, 属性) {

If (元素节点.currentStyle) {

    return  元素节点.currentStyle[属性];

} else {

    return  window.getComputedStyle(“元素节点”,null)[属性];

}

}