DOM中的节点详解

最新推荐文章于 2024-06-05 23:20:10 发布

杏黄的三叶草

最新推荐文章于 2024-06-05 23:20:10 发布

阅读量176

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104254402

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

/*总结:
    *文档:document
    *元素:页面中所有的标签(元素-----element,标签----元素---对象)
    *结点:页面中所有的内容(标签，属性，文本[文字,换行,空格,回车])[node]
    *根元素:html标签
    *节点的属性:(可以使用标签[元素].出来,可以使用属性节点.出来,文本节点.点出来)
    *nodeType:节点的类型--->1代表标签，2代表属性，3代表文本[number]
    *nodeName:节点的名字--->标签节点[大写的标签名字]，属性节点[小写的属性名字]，文本节点[#text]
    *nodeValue:节点的值--->标签节点[null],属性的节点[属性值],文本节点[文本内容]
    *凡是获取节点的代码在谷歌和火狐得到的都是相关的节点
    *凡是获取元素的代码在谷歌和火狐得到的都是相关的元素
    *从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
    * */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="common.js"></script>
</head>
<body>
<div id="dv">
    <span>这是div中的第一个span标签</span>
    <p>这是div中的第二个元素,第一个p标签</p>
    <ul id="uu">
        <li>乔峰</li>
        <li>鹿茸</li>
        <li id="three">段誉</li>
        <li>卡卡西</li>
        <li>雏田</li>
    </ul>
</div>
<script>
    var ulObj=my$("uu");
    console.log(ulObj.parentNode);//父级节点
    console.log(ulObj.parentElement);//父级元素
    console.log(ulObj.childNodes);//子节点
    console.log(ulObj.children);//子元素
    console.log("==============================================");
    console.log(ulObj.firstChild);//第一个子节点,===========IE8中是第一个子元素
    console.log(ulObj.firstElementChild);//第一个子元素,==========IE8中不支持,以下同理可得
    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>
<script>
    /*总结:
    *文档:document
    *元素:页面中所有的标签(元素-----element,标签----元素---对象)
    *结点:页面中所有的内容(标签，属性，文本[文字,换行,空格,回车])[node]
    *根元素:html标签
    *节点的属性:(可以使用标签[元素].出来,可以使用属性节点.出来,文本节点.点出来)
    *nodeType:节点的类型--->1代表标签，2代表属性，3代表文本[number]
    *nodeName:节点的名字--->标签节点[大写的标签名字]，属性节点[小写的属性名字]，文本节点[#text]
    *nodeValue:节点的值--->标签节点[null],属性的节点[属性值],文本节点[文本内容]
    *凡是获取节点的代码在谷歌和火狐得到的都是相关的节点
    *凡是获取元素的代码在谷歌和火狐得到的都是相关的元素
    *从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
    * */
</script>
</body>
</html>

节点的部分兼容代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="common.js"></script>
</head>
<body>
<ul id="uu">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>
<script>
    /*
    *第一个节点和第一个元素的获取的代码在IE8中可能不支持
    *最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
    *前一个节点和前一个元素的获取的代码在IE8中可能不支持
    *后一个节点和后一个元素的获取的代码在IE8中可能不支持
    *element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
    *element.firstChild--->IE8获取的是第一个子元素
    *element.firstChild--->谷歌和火狐获取的是第一个子节点
    * */

    //获取任意一个父级元素的第一个子级元素
    function getFirstElementChild(element) {
        //true--->支持
        if(element.firstElementChild){
            return element.firstElementChild;
        }else{
            var node=element.firstChild;
            while(node&&node.nodeType!=1){
                node=node.nextSibling;
            }
            return node;
        }
    }

    //获取任意一个父级元素的最后一个子级元素
    function getLastElementChild(element) {
        //true--->支持
        if(element.lastElementChild){
            return element.lastElementChild;
        }else{
            var node=element.lastChild;
            while(node&&node.nodeType!=1){
                node=node.previousSibling;
            }
            return node;
        }
    }
</script>
</body>
</html>

点击按钮设置p标签中的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="common.js"></script>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--点击按钮设置p标签中的背景颜色-->
<input type="button" value="变色" id="btn"/>
<div id="dv">
    <span>这是span</span>
    <p>这是p</p>
    <span>这是span</span>
    <p>这是p</p>
    <span>这是span</span>
    <p>这是p</p>
    <span>这是span</span>
    <a href="http://www.baidu.com">百度</a>
</div>
<script>
    my$("btn").onclick=function () {
        var obj=my$("dv").childNodes;
        for(var i=0;i<obj.length;i++){
            //判断这个子节点是不是p标签
            if(obj[i].nodeName=="P"&&obj[i].nodeType==1){
                obj[i].style.backgroundColor="red";
            }
        }
    };
</script>
</body>
</html>

杏黄的三叶草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM中的节点详解

/*总结: *文档:document *元素:页面中所有的标签(元素-----element,标签----元素---对象) *结点:页面中所有的内容(标签，属性，文本[文字,换行,空格,回车])[node] *根元素:html标签 *节点的属性:(可以使用标签[元素].出来,可以使用属性节点.出来,文本节点.点出来) *nodeType:节点的类型-...
复制链接

扫一扫

专栏目录