DOM怎么获取节点
全局对象:window中存在一个属性document,代表整个文档节点
通过方法获取
- document.getElementById():通过id名获取对应的元素,如果id名不存在则返回为null (常用)
- document.getElementsByTagName():通过元素名获取对应的元素,获取出来的是一个类数组对象 (常用)
- document.getElementsByClassName():通过class名获取对应的元素,获取出来的是一个类数组对象 IE9以下不能使用
- document.getElementsByName():通过元素的name属性获取对应的元素,获取出来的是一个类数组对象
- document.querySelector():通过css选择器获取元素,获取匹配到的第一个,IE8以下无效
- document.querySelectorAll():通过css选择器获取元素,获取匹配到的所有,IE8以下无效,获取出来的是一个类数组对象
注意点:
1. 在所有得到类数组对象的方法中,除了querySelectorAll其他方法都是实时更新的。
2. 执行效率最高的是getElementById
3. getElementsByTagName,getElementsByClassName,querySelector,querySelectorAll可以作为其他元素节点对象的方法使用。
<div id="div" style="width:100px;height:100px;background-color: aqua;">1</div>
<div id="div">2</div>
<span name="qwe" class="span">1</span>
<span name="qwe" class="span">2</span>
<span class="span">3</span>
<span class="span">4</span>
<div id="container">
<span>
<a href="">qwe</a>
</span>
</div>
<script>
var div = document.getElementById("div")
var span = div.getElementsByTagName("span")
console.log(span)
</script>
通过id名(ById)查询到的节点是唯一的;通过标签名(ByTagName)查询的节点返回的是一个类数组,
所有直接打印span,会把查询到所有span节点内容打印出来,如果想要标签名查询获取具体span节点,就需要通过数组查询数组内元素的方法来查询,类数组中的元素节点。例如(var span = div.getElementsByTagName(“span”)[0])查询的就是标签名为"span"的第一个元素节点。
通过节点关系获取节点
通用的节点关系
- parentNode:查看父节点
- previousSibling:查看上一个兄弟节点
- nextSibling:查看下一个兄弟节点
- childNodes:查看子节点们
- firstChild:查看第一个子节点
- lastChild:查看最后一个子节点
- attibutes:查看元素节点的属性集合
只针对于元素节点
- parentElement:查看父元素节点
- children:查看子元素节点们 <=IE9不兼容
- firstElementChild:查看第一个子元素节点 IE不兼容
- lastElementChild:查看最后一个子元素节点 IE不兼容
- previousElementSibling:查看上一个兄弟元素节点
- nextElementSibling:查看下一个兄弟节点
获取节点信息
- 获取节点名称 nodeName 如果是元素节点返回全是大写的
- 获取节点的值 nodeValue
- 获取节点类型 nodeType 返回一个数字
元素节点 : 1
属性节点:2
文本节点 :3
注释节点 :8
document :9
文档类型节点 :10
<script>
var div = document.getElementById("div")
var span = document.getElementsByTagName("span")
var div1=document.getElementById("container");
var span1=div1.children[0].nodeType;
console.log(span1);
</script>
在上方代码基础上添加了2行代码:
上方代码我们查找了id为"container"的元素节点,通过.children[0]找到他子节点中的第一个元素节点,并获取当前节点的节点类型,控制台打印,结果为"1",节点类型为元素节点。