JavaScript-----详细讲解js节点以及节点操作

最新推荐文章于 2024-03-17 21:53:33 发布

Favour72

最新推荐文章于 2024-03-17 21:53:33 发布

阅读量3.3k

点赞数 10

分类专栏： javascript案例文章标签：前端 javascript css3 html5

本文链接：https://blog.csdn.net/weixin_45904557/article/details/124761205

版权

javascript案例专栏收录该内容

19 篇文章 0 订阅

订阅专栏

🍓.获取元素通常使用两种方式:

🐇.利用DOM提供的方法获取元素

document.querySelector()

document.getElementsByClassName()

document.getElementsByTagName()

document.getElementById()

🐇.利用节点层级关系获取元素

利用父子兄弟节点关系获取元素

逻辑性强,但兼容性较差

网页中的所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点用node表示

HTML DOM树中的所有节点都可通过JavaScript进行访问,所有html元素(节点)都可以被修改,也可以创建或删除

节点至少拥有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性

🍓DOM的节点

常用的三种节点类型有

🐇.元素节点元素节点返回值为1

🐇.属性节点属性节点返回值为2

🐇.文本节点文本节点返回值为3(文本节点包含文字,空格,换行)

在实际开发中,节点操作主要操作的是元素节点

    <div id="box">hello</div>
</body>
<script>
    var oDiv=document.getElementById("box");//div元素对象
    console.log(oDiv.nodeName)//节点名称 div
    console.log(oDiv.tagName)//标签名称div
    console.log(oDiv.nodeType)//1   节点类型
    console.log(oDiv.nodeValue);//null  节点值
    var attr=oDiv.getAttribute("id");
    console.log(attr.nodeName)//节点名称 属性名
    console.log(attr.nodeType)//2   节点类型
    console.log(attr.nodeValue);//  节点值   属性值

   var ch= oDiv.firstChild;//第一个字节点
   alert(ch)//[object Text]文本对象节点
   console.log(ch.nodeName)//节点名称 文本
    console.log(ch.nodeType)//3   节点类型
    console.log(ch.nodeValue);//  节点值   文本值

🍓DOM的更删改查

🐇.查找元素节点

🐇.父节点查找子节点

1. 通过父节点对象查找子节点对象(可能会有文本节点) 兼容性好
1.1 父节点对象.firstChild 查找父元素下的第一个节点可能会有文本节点换行
1.2父节点对象.lastChild 查找父元素下的最后一个节点
1.3父节点对象.childNodes 多个查找父元素下的所有个节点

2.通过父节点对象查找子节点对象 ie9以上支持
   2.1父节点对象.firstElementChild 查找父元素下的第一个子元素节点
      2.2父节点对象.lastElementChild 查找元素的最后一个子元素节点
2.3父节点对象.children                多个查找父元素下的所有的子元素节点对象

父元素节点.children[索引] 返回第索引个子元素,没有兼容性问题

举个栗子:

父元素节点.children[0] 返回第一个子节点

父元素节点.children[父元素节点.children.length-1] 返回最后一个子节点

    <ul id="box">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oUl=document.getElementById('box');
    console.log(oUl.firstChild);   //第一个字节点  可能会有文本节点  换行
    console.log(oUl.firstElementChild);  //第一个元素节点
    console.log(oUl.firstChild.nodeType);//3
    console.log(oUl.firstChild.nodeValue);//
    console.log(oUl.firstChild.length);//7   空格和li  把空格去掉就没有,长度为3   换行也属于空格
    //判断childNodes[i].nodeType
    var elArr=[];
    for(var i=0;i<oUl.childNodes.length;i++){
        if(oUl.childNodes[i].nodeType===1){
            elArr.push(oUl.childNodes[i])
        }
    }
    console.log(elArr)

🐇.通过子节点查找父节点

子节点.parentNode 查找离元素最近的父节点,如果找不到父节点就返回为空
子节点.parentElement 查找父元素

    <ul id="box">
        <li id="list">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oLi=document.getElementById('list');


    consol.log(oLi.parentNode)  //查找父节点
    consol.log(oLi.parentElement)  //查找父元素

🐇.兄弟节点的操作

node.nextSibling 查找下一个兄弟节点找不到返回null,包含所有的节点可能为文本节点或元素节点
node.previousSibling 查找上一个兄弟节点找不到返回null,包含所有的节点可能为文本节点或元素节点
ie9以上支持
node.nextElementSibling 查找下一个元素兄弟节点
node.previousElementSibling 查找上一个元素兄弟节点

    <ul id="box">
        <li >列表1</li>
        <li id="list">列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oLi=document.getElementById('list');

    // oLi.nextSibling

    console.log(oLi.nextSibling)  //查找 下一个兄弟节点  可能为文本
    console.log(oLi.nextElementSibling)  //查找下一个元素兄弟节点

    // oLi.previousSibling

    console.log(oLi.previousSibling)        //查找上一个兄弟节点  可能为文本
    console.log(oLi.previousElementSibling) //查找上一个元素兄弟节点

🍓页面中想要添加一个新的元素

1.创建元素

2.添加元素

🐇创建元素节点对象

document.createElement("属性名") 创建元素节点对象

    <div id="box">
        hello world
       
    </div>
    <button id="btn"></button>
</body>
<script>
    var oDiv=document.getElementById('box');
    var oBtn=document.getElementById('btn');
    var oSpan=document.createElement("span") //创建一个元素
    // console.log(oSpan);//元素对象  <span></span>
    oSpan.innerHTML="我是span"
    console.log(oSpan);//元素对象

document.createAttribute("属性名") 创建属性节点对象
document.createTextNode("文本内容") 创建文本节点创建

🐇添加节点

父节点.appendChild(元素对象) 追加元素对象到父元素的内部末尾 直接用父元素调用

    <div id="box">
        hello world
       
    </div>
    <button id="btn"></button>
</body>
<script>
    var oDiv=document.getElementById('box');
    var oBtn=document.getElementById('btn');
    var oSpan=document.createElement("span") //创建一个元素
    // console.log(oSpan);//元素对象  <span></span>
    oSpan.innerHTML="我是span"
    //追加
    oDiv.appendChild(oSpan);

🐇将一个节点添加到父节点的指定子节点前面

父节点对象.insertBefore(参数1，参数2) 把参数1节点对象插入到参数2节点对象之前

参数1 必须要插入的节点对象

参数2 必须参照物节点对象

放在谁的内部,谁调用insertBefore()

父节点.append("shuxing") 追加节点括号中只可以写块或者字符串

		<div class="box">
			<span id="con">
				hello
			</span>
		</div>
	</body>
	<script type="text/javascript">
		var oDiv = document.getElementsByClassName("box")[0]
		var oSpan = oDiv.firstElementChild;
		var p=document.createElement("p")
		oDiv.insertBefore(p, oSpan);

🍓节点的删除和替换节点

🐇删除

父节点.removeChild(要删除的节点) 删除节点

要删除的节点.remove() 删除节点兼容性没有上一个好

		<div id="box">
			hello world
			<span>hello</span>
		</div>
		<button type="button" id="btn">删除</button>
	</body>
	<script type="text/javascript">
		var oBtn=document.getElementById("btn")
		var oDiv=document.getElementById("box")
		var oSpan=oDiv.firstElementChild;
		oBtn.onclick=function(){
			// oDiv.removeChild(oSpan);
			oSpan.remove();
		}

🐇替换

父节点.replaceChild(参数1，参数2) 替换节点对象 用参数1 替换参数2

参数1 必须用来替换的节点

参数2 必须被替换的节点

🍓获取元素节点对象

元素节点对象.getAttributeNode("属性节点名称") 获取属性节点得到的是属性对象
元素节点对象.tagName 获取标签名称另一种获取元素节点的方法
属性节点对象.nodeName 获取属性节点节点名称
属性节点对象.nodeType 返回属性节点节点类型返回值为2
属性节点对象.nodeValue 获取属性节点节点的内容/值
属性节点.firstChild 获取第一个子节点.
文本节点对象.nodeName 获取属性节点节点名称返回值为#text
文本节点对象.nodeType 返回属性节点节点类型返回值为3
文本节点对象.nodeValue 获取属性节点节点的内容/值

🍓设置属性节点对象

🐇节点对象.getAttribute("属性名") 根据节点对象获取属性名

🐇节点对象.setAttribute("属性名"，"属性值") 设置属性值只可以设置能直接在标签上的属性

🐇节点对象.removeAttribute("属性名") 删除括号中的属性

🍓节点的拷贝与添加

🐇节点对象.cloneNode(参数) 克隆节点对象

如果括号里面参数为空,或者是false

参数可选布尔值浅拷贝/深拷贝默认false 浅拷贝不克隆子节点深拷贝为克隆次节点对象的所有属性即所有节点

CSDN话题挑战赛第1期
活动详情地址：CSDN

Favour72

关注

10
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-----详细讲解js节点以及节点操作

获取元素通常使用两种方式:利用DOM提供的方法获取元素document.querySelector()document.getElementsByClassName()document.getElementsByTagName()document.getElementById()利用节点层级关系获取元素利用父子兄弟节点关系获取元素逻辑性强,但兼容性较差🍓.🐇.网页中的所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点用node表示...
复制链接

扫一扫