欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-22 09:57:10
如何获取dom一、通过元素类型的方法来操作:.document.getElementById(); //id名,在实际开发中较少使用,选择器中多用class id一般只用在*层存在 不能太过依赖iddocument.getElementsByTagName()//标签名document.getElementsByClassName()//类名document.getElementsByName() //name属性值,一般不用document.querySelector() //css选...

如何获取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