DOM: document object model
- DOM 树
DOM中元素获取的方式
-
通过ID获取（getElementById）
var oDiv=document.getElementById('div')
用法：
1.上下文必须是document。
2.必须传参数，参数是string类型，是获取元素的id。
3.返回值只获取到一个元素，没有找到返回null。 -
通过name属性（getElementsByName）
document.getElementsByName('name')
用法：
1.上下文必须是document。
2.必须传参数，参数是是获取元素的name属性。
3.返回值是一个类数组，没有找到返回空数组。 -
通过标签名（getElementsByTagName）
document.getElementsByTagName('p');
var oDiv = document.getElementById('divId');
oDiv.getElementsByTagName('p');
用法：
1.上下文可以是document，也可以是一个元素，注意这个元素一定要存在。
2.参数是是获取元素的标签名属性，不区分大小写。
3.返回值是一个类数组，没有找到返回空数组。
4.可以限定范围的获取元素。 -
通过class类名（getElementsByClassName）
document.getElementsByClassName('wangle');
用法（和getElementsByTagName类似）：
1.上下文可以是document，也可以是一个元素。
2.参数是元素的类名。
3.返回值是一个类数组，没有找到返回空数组。
4.可以限定范围的获取元素。 -
获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的。 -
获取body的方法（document.body）
document.body是专门获取body这个标签的。 -
通过选择器获取一个元素（querySelector）
- tag
- #id
- .class
用法：
1.上下文可以是document，也可以是一个元素。
2.参数是选择器，如："div .className"。
3.返回值只获取到一个元素。
- 通过选择器获取一组元素（querySelectorAll）
用法（和getElementsByTagName类似）：
1.上下文可以是document，也可以是一个元素。
2.参数是元素的类名。
3.返回值是一个类数组，没有找到返回空数组。
4.，querySelectAll获取到的是一组元素，即使是页面中唯一的id，也得加[];
节点
|nodeType | nodeName | nodeValue
---|---|---|---
文本节点 | 3 | "#text" | 文本内容
元素节点 | 1 | 大写的标签 | null
注释节点 | 8 | #comment | 注释内容
document节点|9 | #document | null
节点关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点常用属性</title>
<style type="text/css">
#box1{
width: 400px; height: 200px;background-color: red;
}
#box2{
width: 200px;height: 200px;background-color: green;
}
#box3{
width: 200px;height: 200px;background-color: yellow;
}
</style>
</head>
<body>
<div id="box1">
<p>我是第一个P</p>
<p>我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
<div>
<p>我是第1个P</p>
<p>我是第2个P</p>
<p>我是第3个P</p>
<p>我是第4个P</p>
</div>
</div>
<div id="box2"></div>
<div id="box3"></div>
<input id="put" type="text" name="in" placeholder="sunck is a good man">
</body>
</html>
- children 子元素
+ 一般情况兼容，但是在IE7／8下，如果有注释的话，拿到的是不准确的；
-
childNodes 拿到所有的子节点
var jsDivBox1 = document.getElementById("box1");
var allChildsNodeArr = jsDivBox1.childNodes;
for (var i = 0; i < allChildsNodeArr.length; i++) {
if (allChildsNodeArr[i].nodeType == 1) {
console.log(allChildsNodeArr[i]);
}
} -
parentNode 父元素； 拿的是结构上的父级；
var fatherNode = jsDivBox1.parentNode;
console.log(fatherNode); -
previousSibling 上一个哥哥节点
var p1 = p2.previousSibling;
console.log(p1); -
nextSibling 下一个弟弟节点
var p3 = p2.nextSibling;
console.log(p3);
封装
-
getChildren 获取当前容器下，所有的子元素；
- 实际能拿到所有的孙子辈的
-
pre() 获取当前元素的上一个哥哥元素；
网友评论