JavaScript节点操作

最新推荐文章于 2024-07-18 20:18:56 发布

退堂鼓职业选手

最新推荐文章于 2024-07-18 20:18:56 发布

阅读量418

点赞数 1

分类专栏： B站学习记录学习记录JavaScript 文章标签： javascript js css

本文链接：https://blog.csdn.net/weixin_45886797/article/details/119271508

版权

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

15 篇文章 0 订阅

订阅专栏

学习记录JavaScript

9 篇文章 0 订阅

订阅专栏

本文介绍了DOM操作中获取元素的两种方式，包括DOM方法和节点层级关系，并详细讲解了节点的属性如nodeType、nodeName和nodeValue。接着，讨论了父级节点、子节点、兄弟节点的操作，以及如何创建、添加、删除和复制节点。通过两个案例，分别展示了实现下拉菜单效果和动态创建发布留言功能的具体代码实现。

摘要由CSDN通过智能技术生成

JSday8

文章目录

JSday8

DOM-节点操作

获取元素的两种方式

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

document.getElementById()
document.getElementByTagName()
document.querySelector等
逻辑性不强，繁琐

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

利用父子兄弟节点关系获取元素
逻辑性强，但兼容性稍差

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

元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3（文本节点包含文字、空格、换行等）

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

节点层级

父级节点

node.parentNode

若找不到父节点则返回null
返回的是最近的一个父节点

子节点

parentNode.childNodes(标准)

返回包含指定节点的子节点的集合，该集合为即时更新的集合

注：返回值里面包含了所有的子节点，包括元素节点，文本节点等。若只想获取元素节点需做进一步处理故一般不提倡使用childNodes

var ul = document.querySelector('ul');
for(var i=0; i<ul.childNodes.length; i++){
	if(ul.childNodes[i].nodeType == 1){
		console.log(ul.childNodes[i]);
	}
}

parentNode.children(非标准) 用得较多

获取第一个和最后一个子元素节点(IE9以上支持)

parentNode.firstElementChild
parentNode.lastElementChild

实际开发的写法：

第一个：ul.children[0]

最后一个：ul.children[ul.children.length - 1]

案例1：下拉菜单

导航栏中所有的li都有鼠标经过效果，故需要循环注册鼠标事件
当鼠标经过li里面的第二个孩子ul显示，当鼠标离开时，则ul隐藏

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		    <style>
		    *{
		        margin:0;
		        padding:0;
		    }

			a {
				text-decoration: none;
				font-size: 14px;
			}
			li {
				list-style: none;
			}
			.nav {
				margin:100px;
	 
			}
			.nav>li {
				position: relative;
				float: left;
				width: 80px;
				height: 41px;
				text-align: center;
			}
			.nav li a {
				display: block;
				width: 100%;
				height:100%;
				line-height: 41px;
				color: #333;
				
			}
			.nav>li>a:hover {
				background-color: red;
			}
			.nav ul {
				display: none;
				position: absolute;
				top: 41px;
				left: 0;
				width: 80px;
				border-left:1px solid #fecc5B;
				border-right:1px solid #fecc5B;
	 
			}
			.nav ul li {
				border-bottom:1px solid #FECC5B;
			}
	 
			.nav ul li:hover {
				background-color: #bbb;
			}
		    </style>
		
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">微博</a>
				<ul>
					<li href="#">私信</li>
					<li href="#">评论</li>
					<li href="#">@我</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li href="#">私信</li>
					<li href="#">评论</li>
					<li href="#">@我</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li href="#">私信</li>
					<li href="#">评论</li>
					<li href="#">@我</li>
				</ul>
			</li>
		</ul>
		
		
		<script>
			 var nav = document.querySelector('.nav');
			 var lis = nav.children;
			 for (var i =0 ;i<lis.length;i++) {
				lis[i].onmouseover = function() {
						this.children[1].style.display = 'block';
						console.log (this.children[1]);
				}
				lis[i].onmouseout = function() {
					this.children[1].style.display = 'none';
				}
			 }		 
		</script>
	</body>
</html>

兄弟节点

node.nextSibling得到下一个兄弟节点包含元素节点和文本节点

node.previousSibling 得到上一个兄弟节点，若不存在则返回null

得到元素节点IE9以上支持

node.nextElementSibling得到当前元素下一个兄弟元素节点
node.previousElementSibling得到上一个元素节点

解决兼容性问题:自己封装一个兼容性函数

function getNextElementSibling(element){
    var el = element;
    while(el = el.nextSibling){
          if(el.nodeType === 1){
             	return el;
             }
          }
    return null;
}

创建节点

document.createElement(‘tagName’)

创建由tagName指定的HTML元素，由于这些元素原先不存在，是根据需求动态生成的，故也称为动态创建元素节点。

添加节点

node.appendChild(child)

将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里的after伪元素。

<ul></ul>
<script>
	var li = document.createElement('li');
    var ul = document.querySelector('ul')
    ul.appendChild(li);
    
    var lili = document.createElement('li');
    ul.insertBefore(lili,ul.children[0]);
</script>

node.insertBefore(child,指定元素)

将节点添加到指定子节点的前面

删除节点

node.removeChild(child)

从DOM中删除一个子节点，返回删除的节点

阻止链接跳转:JavaScript:;或JavaScript:void(0)

复制节点

node.cloneNode()

返回调用该方法的节点的一个副本，也称为克隆节点。

node.cloneNode(); 括号为空或者里面是false 浅拷贝只复制标签不赋值里面的内容

node.cloneNode(true); 括号为true 深拷贝复制标签复制里面内容

案例2：发布留言

点击按钮后，动态创建一个li，添加到ul里
创建li的同时，把文本域中的值通过li.innerHTML赋值给li

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
        
        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 1. 获取元素
        var textarea = document.querySelector('textarea');
        var button = document.querySelector('button');
        var ul = document.querySelector('ul');
        // 2.注册事件
        button.onclick = function() {
            if (textarea.value == '') {
                alert('您没输入内容');
            } else {
                // 3.创建元素
                var li = document.createElement('li');
                li.innerHTML = textarea.value + '<a href = "javascript:;">删除</a>';
                // 4.添加元素
                ul.insertBefore(li, ul.children[0]);
                // 5.删除元素
                var a = document.querySelectorAll('a');
                for (var i = 0; i < a.length; i++) {
                    a[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>