JavaScript 中获取元素节点 javascript获取元素的方法

转载

mob64ca140c3859 2023-09-27 10:55:09

文章标签 JavaScript 中获取元素节点 JavaScript 子节点 css html 文章分类 JavaScript 前端开发

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

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>

<script>
    var div=document.getElementById("myDiv");
    //在div下调用
    var p1=div.getElementsByTagName("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

    ar p3=document.querySelectorAll("p");
    alert(p3.length);    //4

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