Javascript——节点操作元素案例及封装节点

最新推荐文章于 2022-02-18 17:03:08 发布

mintsolace

最新推荐文章于 2022-02-18 17:03:08 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记 javascript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/94780445

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

本文介绍了JavaScript中节点操作的相关知识，通过nodeType属性区分不同类型的节点，并提供了实例，如点击事件改变元素背景色，以及实现节点隔行变色效果。同时，文章讨论了在不同浏览器环境下，获取第一个子节点和第一个子元素的差异，强调了IE8的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节点类型常量
nodeType属性可用来区分不同类型的节点，比如元素，文本和注释。
返回一个整数，其代表的是节点类型

var type = node.nodeType;

常量	值	描述
Node.ELEMENT_NODE	1	一个元素节点，例如 <p>和<div>
Node.TEXT_NODE	3	Element或者 Attr中实际的文字
Node.CDATA_SECTION_NODE	4	一个 CDATASection例如 <!CDATA[[ … ]]>。
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的ProcessingInstruction，例如<?xml-stylesheet ... ?>声明
Node.COMMENT_NODE	8	一个Comment节点
Node.DOCUMENT_NODE	9	一个Document节点
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的DocumentType节点。例如<!DOCTYPE html> 就是用于HTML5的
Node.DOCUMENT_FRAGMENT_NODE	11	一个DocumentFragment节点

例：点击按钮设置div中p标签改变背景颜色

<input type="button" value="变色" id="btn" />
<div id="dv">
    <span>1</span>
    <p>2</p>
    <span>3</span>
    <p>4</p>
    <span>5</span>
    <p>6</p>
</div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function(){
        //先获取div
        var dvObj=my$("dv");
        //获取里面所有的子节点
        var nodes=dvObj.childNodes;
        //循环遍历所有的子节点
        for(var i=0; i<nodes.length; i++){
            //判断这个子节点是不是p标签
            console.log(nodes[i].nodeType);
            console.log(nodes[i].nodeName);
            if(nodes[i].nodeType == 1 && nodes[i].nodeName == "P"){
                nodes[i].style.backgroundColor="red";
            }
        }
    }
</script>

例：节点操作隔行变色

<input type="button" value="变色" id="btn" />
<ul id="uu">
    d
</ul>
<script src="common.js"></script>
<script>
    //隔行变色
    my$("btn").onclick=function () {
        var count=0;//记录有多少个li
        //获取ul中所有的子节点
        var nodes=my$("uu").childNodes;
        for (var i=0; i<nodes.length; i++){
            //判断这个节点是不是li标签
            if(nodes[i].nodeType==1&&nodes[i].nodeName=="LI"){
                nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
                count++;
            }
        }
    };
</script>

封装节点兼容代码
第一个节点和第一个元素的获取的代码在IE8中可能不支持
element.firstChild——谷歌和火狐获取的是第一个子节点
element.firstChild——IE8获取的是第一个子元素
element.firstElementChild——谷歌和火狐是第一个子元素，IE8不支持

<ul>
    <li>白日梦蓝</li>
    <li>你要跳舞吗</li>
    <li>花火</li>
    <li>New Boy</li>
    <li>逝去的歌</li>
    <li>心向夏天</li>
    <li>人间惆怅客</li>
</ul>
<script src="common.js"></script>
<script>
    //获取任意一个父级元素的第一个子级元素
    function getFirstElementChild(element){
        if(element.firstElementChild){//true——支持
            return element.firstElementChild;
        }else{
            var node=element.firstChild;//第一个节点
            while (node&&node.nodeType!-1){
                node=node.nextSibling;
            }
            return node;
        }
    }
    //获取任意一个父级元素的最后一个子级元素
    function getLastElementChild(element){
        if(element.lastElementChild){//true——支持
            return element.lastElementChild;
        }else{
            var node=element.lastChild;//第一个节点
            while(node&&node.nodeType!=1){
                node=node.previousSibling;
            }
            return node;
        }
    }
</script>