24 节点

最新推荐文章于 2024-07-15 14:11:16 发布

qingshui_913

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量189

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_59809997/article/details/123496856

版权

Javascript学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文档 document
元素 element(页面中的标签都叫元素p、div、 a元素就是标签)
节点 Node页面中所有的内容都叫做节点(元素、标签、属性、文本——文字、空格、换行、回车 )

DOM节点 HTML文档
元素节点标签
属性节点属性
文本节点文本内容
注释节点注释

节点属性(可以用标签.出来，元素.出来，属性.出来，文本.出来)
节点类型 nodeType
1代表标签节点
2代表属性节点
3代表文本节点

节点名字 nodeName
标签节点——获取大写的标签名
属性节点——获取小写的属性名
文本节点——获取#text

节点的值 nodeValue
标签节点——null
属性节点——属性值
文本节点——文本内容

例：

<body>
<div id="dv">
    <span>span标签</span>
    <p>标签</p>
    <ul id="uu">
        <li>鸣人</li>
        <li>佐助</li>
        <li id="three">小樱</li>
        <li>我爱罗</li>
        <li>小李</li>
    </ul>
</div>
<script src="publick.js"></script>
<script>
    var ulObj = my$("uu");
    //ul标签的父节点    ul标签的父级元素——元素就是标签
    console.log(ulObj.parentNode); //<div></div>
    //获取父级元素
    console.log(ulObj.parentElement); //<div></div>
    //div是ul的父节点也是ul的父元素
    
    //获取div的nodeType、nodeName、nodeValue
    console.log(ulObj.parentNode.nodeType); //1代表标签节点
    console.log(ulObj.parentNode.nodeName); //DIV
    console.log(ulObj.parentNode.nodeValue); //null
    
    //追踪父标签
    console.log(ulObj.parentNode); //div
    console.log(ulObj.parentNode.parentNode); //body
    console.log(ulObj.parentNode.parentNode.parentNode); //html
    console.log(ulObj.parentNode.parentNode.parentNode.parentNode);         //document
   console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode); //null
   
var dvObj = document.getElementById("dv");
// 子节点，节点的范围大，包含了标签，文本，换行...
console.log(dvObj.childNodes);
// 子元素----元素就是标签
console.log(dvObj.children);
//总结：节点的范围大（回车也算文本节点，换行，空格），元素的范围小---元素就是标签
for(var i = 0; i < dvObj.childNodes.length; i++){
    /* 
    nodeType ---> 节点类型 1--标签，2--属性，3---文本
    nodeName ---> 节点名称 大写的标签--标签，小写的属性名--属性，#text--文本
    nodeValue ---> 节点值的值 标签--null 属性---属性的值，文本--文本的内容
    */
    var node = dvObj.childNodes[i];
    console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);   
}
// 3.获取属性的节点
var dvObj = document.getElementById("dv");
var node = dvObj.getAttributeNode("id");//属性节点
console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue); 
</script>
</body>

获取节点元素的方式

var ulObj = document.getElementById("uu");
//父级节点
console.log(ulObj.parentNode);
//父级元素
console.log(ulObj.parentElement);
//子级节点
console.log(ulObj.childNodes); //11 换行属于文本
//子级元素——子标签
console.log(ulObj.children); //5
扩展；
//第一个子节点
console.log(ulObj.firstChild);
//第一个子元素
console.log(ulObj.firstElementChild); //<li></li>
//最后一个子节点
console.log(ulObj.lastChild);
//最后一个子元素
console.log(ulObj.lastElementChild);
//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
//某元素的前一个兄弟元素
console.log(my$("three").previousElementSibling); //<li></li>
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);

注：从第一个子节点开始，在IE8等低版本浏览器中叫做元素，第一个子元素，IE8浏览器不支持

需求：点击按钮实现变色

 <style>
    div{
        width: 300px;
        height: 500px;
        border:1px solid #000;
    }
</style>
<body>
<input type="button" value="改变p标签的颜色" 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>
   <p>我是段落P迪迦</p>
   <span>我是span奥特曼</span>
   <p>我是段落P迪迦</p>
   <a href="http://www.baidu.com">百度</a>
   </div>
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
//获取div
var dvObj = my$("dv");
//获取div里的所有子节点
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 = "pink";
    }
  }
} 
</script>

qingshui_913

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
24 节点

文档 document元素 element(页面中的标签都叫元素p、div、 a元素就是标签)节点 Node页面中所有的内容都叫做节点(元素、标签、属性、文本——文字、空格、换行、回车 )DOM节点 HTML文档元素节点标签属性节点属性文本节点文本内容注释节点注释节点属性(可以用标签.出来，元素.出来，属性.出来，文本.出来)节点类型 nodeType1代表标签节点2代表属性节点3代表文本节点节点名字 nodeName
复制链接

扫一扫