js常见节点操作

最新推荐文章于 2024-03-17 21:53:33 发布

黄大仙No.1

最新推荐文章于 2024-03-17 21:53:33 发布

阅读量199

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107817836

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
</ul>
<div class="box">
    <span class="二维码">x</span>
</div>
<script>
    var box=document.querySelector('.box');
    // console.dir(box);
    // nodeType
    // 元素节点:1
    // 属性节点:2
    // 文本节点:3
    // console.log(box.nodeType);
    //父节点
    var erveima=document.querySelector('二维码');
    // console.log(erveima.parentNode==null);        //得到二维码的父节点,如果找不到,返回null,
    // 有的浏览器找不到会报错
    //子节点
    var ul=document.querySelector('ul');
    console.log(ul.childNodes);     //获取子节点,换行也是一个孩子,包含元素结点和文本节点
    console.log(ul.childNodes[0].nodeType);
    console.log(ul.childNodes[1].nodeType);
    //获取所有子元素结点
    console.log(ul.children);       //只获取子元素结点
    //获取第一个子结点和最后一个子结点      //会获取到文本节点,并不是所需要的元素节点
    console.log(ul.firstChild);
    console.log(ul.lastChild);
    //获取第一个子元素结点和最后一个子元素结点 i9以上才支持.
    console.log(ul.firstElementChild);
    console.log(ul.lastElementChild);
    //实际开发中通常用
    console.log(ul.children[0]);
    console.log(ul.children[ul.length-1]);
</script>
</body>
</html>