javascript怎么获取html文件的节点

青灯夜游 原创: 2022-01-23 18:36:01 1455浏览

方法：1、用“document.getElementById("id属性值")”语句；2、用“document.getElementsByTagName("标签名字")”语句；3、用“document.documentElement”语句。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

1. 通过document节点获取（直接获取）

案例：

<body>
    <ul >
        <li id="one">一个</li>
        <li name="name1" >二个</li>
        <li class="classname">三个</li>
        <li>四个</li>
    </ul>
</body>

1.1 通过ID

语法：document.getElementById("id属性值")

特点：根据ID值获取元素，返回元素对象；(id唯一)
示例：

  var one=document.getElementById("one");
    console.log(one);

在这里插入图片描述

1.2 通过标签名

语法：document.getElementsByTagName("标签名字")

特点：标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象；

示例：

 var li=document.getElementsByTagName("li")
    console.log(li);

在这里插入图片描述

1.3 通过name值

语法：document.getElementsByName("name属性的值")

特点：根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
示例：

var name1=document.getElementsByName("name1")[0];
    console.log(name1);

在这里插入图片描述

1.4 通过class

语法：document.getElementsByClassName("类样式的名字")

特点：据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
示例：

 var classname=document.getElementsByClassName("classname")[0];
    console.log(classname);//

在这里插入图片描述

1.5 通过选择器

语法：document.querySelector("选择器的名字")

特点：根据选择器获取元素,返回来的是一个元素对象；
示例：

 var que1=document.querySelector("#one");
    console.log(que1); //

在这里插入图片描述

1.6 通过所有选择器

语法： document.querySelectorAll("选择器的名字")

特点：据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象；
示例：

var queall=document.querySelectorAll("li");
    console.log(queall); //

在这里插入图片描述

1.7 特殊元素获取

语法：doucumnet.body

特点：返回body元素对象
示例：

  var body=document.body ;
    console.log(body);

在这里插入图片描述

1.8 HTML元素获取

语法：document.documentElement

特点：html元素对象
示例：

var dc=document.documentElement  ;
    console.log(dc);

在这里插入图片描述

2. 通过父级节点获取

（一般在已经获取父节点，通过父节点来获取子字节）

<body>
    <div id="digbox">
        <!-- 第一个 -->
        <div id="box1">
            <ul class="ul">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
            </ul>
        </div>
        <!-- 第二个 -->
        <div id="box2">
            <a href="#">这是第二个div</a>
        </div>

        <!-- 第三个 -->
        <div id="box3">
            <a href="#">这是第三个div</a>
        </div>
    </div>
</body>

2.1 获取第一个节点

语法：

document.getElementById("test").firstElementChild;
document.getElementById("test").firstChild;

特点：获取第一个节点

示例：

var box=document.getElementById("digbox").firstElementChild;
    console.log(box);
     
    var box1=document.getElementById("digbox").firstChild;
    console.log(box1);

在这里插入图片描述

2.2 获取最后一个子节点
语法：

document.getElementById("test").lastElementChild;；
document.getElementById("test").lastChild;

特点：获取最后一个子节点

示例：

 var box2= document.getElementById("digbox").lastElementChild;
    console.log(box2);

    var box3= document.getElementById("digbox").lastChild;
    console.log(box3);

在这里插入图片描述

2.3 获取所有子节点

语法：

document.getElementById("test").children[0];
document.getElementById("test").childNodes;
document.getElementById("test").childElementCount;

特点：获取所有子节点

示例：

 var box4= document.getElementById("digbox").children[0];
    console.log(box4);

    var box5= document.getElementById("digbox").childNodes;
    console.log(box5);

    var box6= document.getElementById("digbox").childElementCount;
    console.log(box6);

在这里插入图片描述

2.4 获取直接子节点

语法：document.getElementById("id")

特点：获取直接子节点

示例：

  var box7= document.getElementById("digbox");
    console.log(box7);

在这里插入图片描述

2.5 获取对应属性的节点

语法：document.getElementById("id").getElementsByClassName("ul")；

特点：获取对应属性的节点(可以是ID，class，属性，标签)常用；

示例：

    var box8= document.getElementById("digbox").getElementsByClassName("ul");
    console.log(box8);

在这里插入图片描述

3. 通过兄弟节点获取

<body>
    <div id="box">
        <p>这是第一个标签</p>
        <p id="box2">这是第二个标签</p>
       <div ><a href="">这是第三个标签</a></div>
    </div>
</body>

3.1 获取当前节点的前一个节点

语法：

document.getElementById("id").previousElementSibling；
document.getElementById("id").previousSibling

特点：返回指定节点的前一个节点，如果没有 previousSibling 节点，则返回值为 null。

示例：

var box1=document.getElementById("box2").previousElementSibling;
  console.log(box1);

  var box2=document.getElementById("box2").previousSibling;
  console.log(box2);

在这里插入图片描述

3.2 获取当前节点的后一个节点

语法：

document.getElementById("id").nextSibling
document.getElementById("id").nextElementSibling；

特点：返回指定节点之后紧跟的节点，如果没有 nextSibling 节点，则返回值为 null。

示例：

 var box3=document.getElementById("box2").nextElementSibling;
  console.log(box3);

  var box4=document.getElementById("box2").nextSibling;
  console.log(box4);

在这里插入图片描述

4. 通过子级节点获取

4.1 通过子节点获取父级节点

<body>
    <div id="box">
        <p id="box2">这是第二个标签</p>
    </div>
</body>

语法：document.getElementById("id").parentNode

特点：返回指定节点的父节点,如果指定节点没有父节点，则返回 null。

示例：

  var box=document.getElementById("box2").parentNode;
  console.log(box);

在这里插入图片描述

【相关推荐：javascript学习教程】

以上就是javascript怎么获取html文件的节点的详细内容，更多请关注php中文网其它相关文章！

javascript 获取节点 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：怎么使用javascript改变颜色下一条：css3的过渡效果名是什么

查看更多

热门课程

前端基础到实战（HTML5+CSS3+ES6+NPM）

￥800
￥1200

已抢26629个
抢
PHP基础到实战（PHP+MySQL）

￥800
￥1200

已抢14076个
抢
前端开发（基础+实战项目合集）

￥800
￥1200

已抢7081个
抢
PHP编程（基础知识点汇总）

￥800
￥1200

已抢8590个
抢
前后端分离的商城系统（Vue3+Laravel8+Uniapp）

￥1200
￥2400

已抢17517个
抢
PHP MySQL基础编程课

￥800
￥1200

已抢7030个
抢

打开APP，随时随地在线学习！

javascript怎么获取html文件的节点

1. 通过document节点获取（直接获取）

2. 通过父级节点获取

3. 通过兄弟节点获取

4. 通过子级节点获取

相关文章

￥800

￥800

￥800

￥800

￥1200

￥800