JavaScript获取dom的几种方式

最新推荐文章于 2024-05-10 09:10:36 发布

暗夜之洲

最新推荐文章于 2024-05-10 09:10:36 发布

阅读量166

点赞数

分类专栏：前端开发文章标签： JavaScript 前端开发

前端开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

DOM是一个属性结构，操作一个DOM节点，时间就是这几个操作：更新，删除，添加，遍历。在操作DOM之前，需要通过各种方式拿到DOM节点，常用方法有：

一.通过元素类型的方法来操作

document.getElementById();//id名，在实际开发中较少使用，选择器中多用class，id一般只用在顶级层存在，不能太过于依赖id
document.getElementsByTagName();//标签名
document.getElementsByClassName();//类名
document.getElementsByName();//name属性，一般不用
document.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素，如果没找到匹配的元素，则返回null
document.querySelectorAll();//css选择符模式，返回与该模式匹配的所有元素，结果为一个数组。

注意：前缀为document，意思是在document节点下调用这些方法，当然也可以再其他的元素节点下调用：

<div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
</div>
<p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");//在div下调用
        alert(p1.length);//3  div节点下的p元素只有三个
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4  document节点下的p元素有四个

    </script>

querySelector()和querySelectorAll()方法，为静态方法，不是实时的，保存的是当时的状态，是一个副本，即：在以后的代码中通过方法使所选元素发生了变化，但该值依然不会改变，因此使用有局限性，一般不用，除非想得到副本。

        <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");
        alert(p1.length);//3
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4
        var p3=document.querySelectorAll("p");
        alert(p3.length);//4
        document.body.appendChild(document.createElement("p"));//创建新元素P,并添加到body中
        alert(p1.length);//3   div节点下的p元素依然只有三个
        alert(p2.length);//5   在body中添加了一个新的P元素，该方法是“动态的”，因此，长度发生了变化
        alert(p3.length);//4   该方法是“静态的”，因此，无论发生什么变化，p3的值依然不会发生改变

二.根据关系树来选择（遍历节点树）：

DOM（文档对象模型）可以将任何HTML，XML文档描绘成一个多层次的节点树。所有的页面都表现为以一个特定节点为根节点的树形结构。html文档中根节点为document节点。所有节点都有nodeType树形，代表节点的不同类型，通过nodeType树形可以来判断节点的类型。经常使用的节点主要有以下几种类型：

Element类型（元素节点）：nodeType值为1
Text类型（文本节点）：nodeType值为3
Comment类型（注释节点）：nodeType值为8
Document类型（document节点）：nodeType值为9；起规定的一些常用树形有：document.body document.head 分辨为HTML中的<body><head> document.documentElement为<html>标签。

所有节点都有hasChildNodes()方法，判断有无子节点，有一个或多个子节点时返回ture

通过一些树形可以来遍历节点树：

parentNode//获取所选子节点的父节点，最顶层的节点为#document
childNodes//获取所选节点的子节点们
firstChild//获取所选节点的第一个子节点
lastChild//获取所选节点的最后一个子节点
nextSibling//获取所选节点的后一个兄弟节点，列表中最后一个节点的nextSibling属性值为null
previousSibling//获取所选节点的前一个兄弟节点，列表中第一个节点的previousSibling属性值为null

        <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div = document.getElementById("myDiv");
        alert(div.childNodes.length);//7

在上面的例子可以看出，div元素节点的所有子节点一共有7个，div元素节点的所有子节点包括4个文本节点（在此全为空文本）和三个元素节点。

        <div id="myDiv">第一个 
     文本节点<p>html</p>第二个  
     文本节点<p>css</p>第三个 
     文本节点<p>javascript</p>第四个
     文本节点</div>

由于文档中节点类型比较多，遍历子节点的结果很多时候并不鞥得到我们想要的结果，使用遍历元素节点则很方便。

三.基于元素节点树的遍历（遍历元素节点树）：

parentElement//返回当前元素的父元素节点（IE9以下不兼容）
children//返回当前元素的元素子节点
firstElementChild//返回的是第一个元素的子节点（IE9以下不兼容）
lastElementChild//返回的是最后一个元素子节点（IE9以下不兼容）
nextElementSibling//返回的是后一个兄弟元素节点（IE9以下不兼容）
previousSibling//返回的是前一个兄弟元素节点（IE9以下不兼容）

        <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div = document.getElementById("myDiv");
        alert(div.children.length);//3

遍历元素节点虽然方便，但是除了children属性外，其他的属性IE9以下不兼容。

注意：这些获取节点的方式，返回值要么是一个特定的节点，要么是一个结合HTMLCollection，这个节点的集合是一个类数组。