从零开始学 Web 之 DOM(四)节点

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、节点

1、节点的概念

页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点。

2、节点相关的属性

2.1、节点分类

标签节点:比如 div 标签,p 标签等。

属性节点:比如 class,value 等。

文本节点:比如闭合标签中的文本内容。

2.2、节点属性

nodeType:节点的类型,它的值有 1,2,3 三种。

​ 标签节点:值为 1

​ 属性节点:值为 2

​ 文本节点:值为 3

nodeName:节点的名字

​ 标签节点:大写的标签名字

​ 属性节点:小写的属性名字

​ 文本节点:#text

nodeValue:节点的值

​ 标签节点:null

​ 属性节点:属性的值

​ 文本节点:文本内容

3、获取相关节点

3.1、获取父节点和父元素

父节点只能是标签,不能是属性节点和文本节点,所以父节点也是父元素。

<body>
    <div id="dv">
        <p id="pid"></p>
        <span></span>
    </div>

    <script src="common.js"></script>
    <script>
        var dvObj = my$("pid");
        console.log(dvObj.parentNode);
        console.log(dvObj.parentElement);
    </script>
</body>

parentNode:获取元素的父节点。 parentElement:获取元素的父元素。

3.2、获取子节点和子元素

<body>
    <div id="dv">
        <p id="pid">p标签</p>
        <span>span标签</span>
        <ul>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
        </ul>
    </div>

    <script src="common.js"></script>
    <script>
        var dvObj = my$("dv");
        // 获取子节点
        console.log(dvObj.childNodes); // 7个
        // 获取子元素
        console.log(dvObj.children);   // 3个
    </script>
</body>

childNodes:获取所有子节点(包括标签,属性,节点) children:获取所有子元素(仅包括标签)

3.3、通过属性的名字获取属性节点

<body>
    <div id="dv">
        <p id="pid">p标签</p>
        <span>span标签</span>
        <ul>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
        </ul>
    </div>

    <script src="common.js"></script>
    <script>
        var dvObj = my$("dv");   
        console.log(dvObj.getAttributeNode("id")); // id="dv"
    </script>
</body>

getAttributeNode:可以获取属性节点。

3.4、获取节点和元素的12行代码

<body>
    <div id="dv">
        <p id="pid">p标签</p>
        <span>span标签</span>
        <ul id="uu">海
            <li>li标签</li>内
            <li>li标签</li>存
            <li id="three">li标签</li>知己
            <li>li标签</li>天涯
            <li>li标签</li>若比邻
        </ul>
    </div>

    <script src="common.js"></script>
    <script>
        var ulObj = my$("uu");
        // 父节点
        console.log(ulObj.parentNode);
        // 父元素
        console.log(ulObj.parentElement);
        // 子节点
        console.log(ulObj.childNodes);
        // 子元素
        console.log(ulObj.children);
// ------------------------------------------------
        // 第一个子节点
        console.log(ulObj.firstChild);
        // 第一个子元素
        console.log(ulObj.firstElementChild);
        // 最后一个子节点
        console.log(ulObj.lastChild);
        // 最后一个子元素
        console.log(ulObj.lastElementChild);
        // 某个元素的前一个兄弟节点
        console.log(my$("three").previousSibling);
        // 某个元素的前一个兄弟元素
        console.log(my$("three").previousElementSibling);
        // 某个元素的后一个兄弟节点
        console.log(my$("three").nextSibling);
        // 某个元素的后一个星弟元素
        console.log(my$("three").nextElementSibling);

    </script>
</body>

1、以上前四个,chrome, firefox, IE8 都支持 2、后面八个,chrome,firefox支持,IE8下,所有获取节点的操作都获取的是元素,所有获取元素的操作都是 undefined。

3.5、总结

  • 获取父子节点和元素的操作,chrome, firefox, IE8 都支持;
  • 获取特殊子节点或者子元素和兄弟节点和元素操作,IE8 中所有的节点操作都是元素操作,所有的元素操作都是 undefined。

4、通过节点操作元素

通过节点操作元素的背景颜色

// 通过节点设置p标签的背景颜色为蓝色
<body>
    <input type="button" value="变色" id="btn">
    <div id="dv">
        <p>p标签</p>
        <span>span标签</span>
        <p>p标签</p>
        <span>span标签</span>
        <p>p标签</p>
    </div>

    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function () {
            var dvObj = my$("dv");
            var nodes = dvObj.childNodes;
            for(var i=0; i<nodes.length; i++) {
                if((nodes[i].nodeType === 1) && (nodes[i].nodeName === "P")) {
                    nodes[i].style.backgroundColor = "blue";
                }
            }
        };        
    </script>
</body>

通过节点属性来区分节点和元素。

5、封装节点兼容代码

<body>
    <input type="button" value="变色" id="btn">
    <ul id="uu">
        <li>复仇者联盟1</li>
        <li>复仇者联盟2</li>
        <li>复仇者联盟3</li>
        <li id="ii">复仇者联盟4</li>
        <li>复仇者联盟5</li>
        <li>复仇者联盟6</li>
        <li>复仇者联盟7</li>
        <li>复仇者联盟8</li>
    </ul>

    <script src="common.js"></script>
    <script>
        // 获取任意一个父元素的第一个子元素 
        function getFirstElement(element) {
            if(element.firstElementChild) {
                return element.firstElementChild;
            } else { // 主要考虑到多个文本节点的影响
                var node = element.firstChild;
                while((node) && (node.nodeType !== 1)) {
                    node = node.nextSibling;
                }
                return node;
            }
        }       
        // 获取任意一个父元素的最后一个子元素       
        function getLastElement(element) {
            if(element.lastElementChild) {
                return element.lastElementChild;
            } else { // 主要考虑到多个文本节点的影响
                var node = element.lastChild;
                while((node) && (node.nodeType !== 1)) {
                    node = node.previousSibling;
                }
                return node;
            }
        } 
        // 获取任意一个元素的前一个兄弟元素    
        function getPreviousElement(element) {
            if(element.previousElementSibling) {
                return element.previousElementSibling;
            } else { // 主要考虑到多个文本节点的影响
                var node = element.previousSibling;
                while((node) && (node.nodeType !== 1)) {
                    node = node.previousSibling;
                }
                return node;
            }
        } 
        // 获取任意一个元素的后一个兄弟元素        
        function getNextElement(element) {
            if(element.nextElementSibling) {
                return element.nextElementSibling;
            } else { // 主要考虑到多个文本节点的影响
                var node = element.nextSibling;
                while((node) && (node.nodeType !== 1)) {
                    node = node.nextSibling;
                }
                return node;
            }
        } 

        // 测试
        console.log(getFirstElement(my$("uu")).innerText);
        console.log(getLastElement(my$("uu")).innerText);
        console.log(getPreviousElement(my$("ii")).innerText);
        console.log(getNextElement(my$("ii")).innerText);
    </script>
</body>

主要是兼容chrome 和 IE8 之间的差异,其次以获取任意一个父元素的第一个子元素为例,之所以不在 else 里面直接使用 return element.firstChild; 主要考虑到标签之间可能有多个文本节点的影响。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

4149
来自专栏互联网开发者交流社区

JS总结

1624
来自专栏栗霖积跬步之旅

1.react的基础知识

React 的基础之:JSX 语法 react 使用 JSX 语法,js 代码中可以写 HTML 代码。 let myTitle = <h1>Hello, Wo...

2856
来自专栏王磊的博客

jquery的扩展方法介绍

  最近一直在写js,这其中也少不了一位js的主角了jQuery,下面介绍的是jQuery的一些扩展,也就是jQuery的扩展方法,jQuery的扩展方法有两种...

39811
来自专栏前端大白专栏

关于css选择器的问题 + * ~这三个有什么区别

1784
来自专栏JavaEdge

全面入门jQuery最佳实践(二)-jQuery的属性与样式1 .attr()与.removeAttr()2 html()及.text()

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

1093
来自专栏WindCoder

从li看html标签属性(attribute)和dom元素的属性(property)

从对象来说,attribute是html文档上标签属性,而property则是对应dom元素的自身属性。

4111
来自专栏十月梦想

CSS基础语法

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

804
来自专栏Android先生

Android开发人员不得不学习的Vue.js基础

Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

1482
来自专栏落花落雨不落叶

block,inline,inline-block的区别

2768

扫码关注云+社区

领取腾讯云代金券