vue jQuery 以及 js 对dom节点的获取方法

如何获取dom

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

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

<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属性可以来判断节点的类型。经常使用的节点主要有以下几种类型：

1. Element类型（元素节点）：nodeType值为 1
2. Text类型（文本节点）：nodeType值为 3
3. Comment类型（注释节点）：nodeType值为 8
4. Document类型（document节点）：nodeType值为 9；其规定的一些常用的属性有 document.body
   document.head 分别为HTML中的 document.documentElement为标签

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

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

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

三，vue中的获取dom节点

ref=“domName” ⽤法：this.$refs.domName

jquery中获取dom节点

jQuery中包裹后的DOM对象实际上是一个数组，要获得纯粹的DOM对象可以有两种方式：
1、使用数组索引方式访问，例如：
var dom = $(dom)[0];
如： $("#id")[0]
2、使用函数get()访问，例如：
var dom = $(dom).get(0);
get()函数中的参数为索引号

本文地址：https://blog.csdn.net/weixin_46902438/article/details/107540557