JavaScript DOM内容复习

 

学过不用就会忘记，所以需要复习一下

DOM是什么？  

DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

（更多详细内容需要百度）

这是官话，于我而言就是我可以使用js来操作网页中的内容。

DOM元素之查询

通过document直接获取到DOM对象

1. getElementById（通过id来查找节点）
2. getElementsByTagName （通过标签名来查找）
3. getElementsByName（通过Name属性查找）
4. getElementByClassName（通过Class属性查找，IE8不支持）

2，3，4无论查询到几个节点，总是返回数组

查询某一个节点的子节点

1. getElementsByTagName（返回当前节点指定标签名后代节点）
2. childNodes（返回当前节点的所有子节点）
3. firstChild（返回当前节点的第一个子节点）
4. lastChild（返回当前节点的最后一个子节点）

2，3，4均为属性

查询父节点和兄弟节点

1. parentNode(返回当前节点的父节点)
2. previousSibling(返回当前节点的前一个兄弟节点)
3. nextSibling（返回当前节点的后一个兄弟节点）

1，2，3均为属性

使用css选择器的方式去获取元素(IE8及以上)

document.querySelector(“-----css选择器-----”);

该方法总是返回一个元素，且总为第一个

document.querySelectorAll(“-----css选择器-----”);

将查询到的元素以数组形式返回，即使只查询到一个元素

补充

1. 获取body属性，可以直接通过document.body来获取
2. 获取html，document.documentElement
3. document.all 的typeof 是undefined（未深究），作用是获取页面中所有元素

DOM元素之增删改

 修改元素的样式

 通过 　　object.style.样式 = 要修改的值　　修改

读取元素的样式

 通过 　　object.style.样式　　修改（只能读取内联样式的值）

object.currentStyle.样式（只对IE有效，读取当前元素正在显示的样式）（获取到的auto为auto）

object.getComputedStyle()　　 (这是一个方法，需要俩个参数，第一个参数为需要获取样式的对象，第二个参数一般传null，返回值为一个封装了当前元素对应样式的对象)（获取到的suto为具体的值）（不支持IE8及一下）

其他样式相关属性

 

 

注意

1. innerHTML对于自结束标签是没有意义的
2. 读取class属性时，不能直接 点class，因为class是JavaScript的保留字，需要使用点className
3. 修改样式时，某些样式有单位，如‘px’等，需要再修改后的数值后加上（变成一个字符串）
4. 某些样式中有减号，如 background-color 这在JavaScript中是非法的，因此采用驼峰命名法，如backgroundColor
5. 修改的样式是修改其内联样式，优先级虽然高但并不是最高，当修改后样式不改变，应该检查是否为优先级的问题
6. object.currentStyle.样式，object.getComputedStyle()获取到样式都是只读的