09-关于节点

最新推荐文章于 2024-01-14 10:00:00 发布

陀陀吖

最新推荐文章于 2024-01-14 10:00:00 发布

阅读量231

点赞数 1

分类专栏： javascript之webAPI

本文链接：https://blog.csdn.net/weixin_40422393/article/details/90916309

版权

javascript之webAPI 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、节点基础内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点知识</title>
</head>
<body>
    <div id="dv">
        <span>我是span</span>
        <p>我是p</p>
        <input type="text">
        <a href="">我是a</a>
        <ul id="ul">哈哈
            <li>我是第一个li</li>
            <li>我是前一个li</li>     嘿嘿
            <li id="three">我是li</li> 呵呵
            <li>我是后一个li</li>
            <li>我是li</li>    
            <li>我是最后的li</li>嘎嘎
        </ul> 
    </div>
</body>

<script src="common.js"></script>
<script>
    /*
    * 节点：
    *       页面中所有的内容（标签，属性，文本） Node
    *
    * 节点属性：(可以用标签——元素.出来，可以使用属性节点.出来，也可以使用文本节点.出来)
    *       nodeType：节点的类型  1——标签  2——属性  3——文本
    *       nodeName：节点的名字  标签节点——大写的标签名字，属性节点——小写的属性名字，文本节点——#text
    *       nodeValue：节点的值  标签节点——null，属性节点——属性值，文本节点——文本内容
    *
    * 获取相关的节点：
    *
    * */
</script>


<script>
    //=========================================12行代码，都是获取节点和元素的==================================================

    //g获取ul
    var ul=document.getElementById("ul");
    //父级节点
    console.log(ul.parentNode);
    //父级元素
    console.log(ul.parentElement);
    //子节点
    console.log(ul.childNodes);
    //子元素
    console.log(ul.children);
    console.log("=======================================================================================================")
    //第一个子节点
    console.log(ul.firstChild);     //-----------------------在IE8中是第一个子元素
    //第一个子元素
    console.log(ul.firstElementChild);   //-----------------在IE8中是不支持
    //最后一个子节点
    console.log(ul.lastChild);   //-----------------------在IE8中是元素
    //最后一个子元素
    console.log(ul.lastElementChild);  //-----------------在IE8中是不支持
    //某个元素的前一个兄弟节点
    console.log(my$("three").previousSibling);   //-----------------------在IE8中是元素
    //某个元素的前一个兄弟元素
    console.log(my$("three").previousElementSibling);  //-----------------在IE8中是不支持
    //某个元素的后一个兄弟节点
    console.log(my$("three").nextSibling);   //-----------------------在IE8中是元素
    //某个元素的后一个兄弟元素
    console.log(my$("three").nextElementSibling);   //-----------------在IE8中是不支持

    //=========================================================总结==============================================
    /*
    * 以上前面4个属性在IE8中支持
    *
    * 剩下的属性，只要是获取节点的赛IE8中都获取到元素，
    *           只要获取元素的都不支持
    *
    * */

    //总结:凡是获取节点的代码在谷歌和火狐得到的都是  相关的节点
    //凡是获取元素的代码在谷歌和火狐得到的都是   相关的元素
    //从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,		在IE8中得到的是undefined----元素的代码,iE中不支持

</script>
</html>

陀陀吖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09-关于节点

一、节点基础内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>节点知识</title></head><body> <div id="dv"> <s...
复制链接

扫一扫

专栏目录