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)[属性];
}
}