DOM节点的获取

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",节点类型为元素节点。