JavaScript 节点概述、父节点 parentNode、子节点children、兄弟节点、创建节点添加节点、删除节点、复制拷贝节点 ★案例★

最新推荐文章于 2022-02-07 11:23:40 发布

VIP文章 MDR_0820

最新推荐文章于 2022-02-07 11:23:40 发布

阅读量1.7k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/mdr_0820/article/details/120899198

版权

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

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）
开发中节点操作主要操作的是元素节点

父节点 parentNode

获得里元素最近的父级节点

<body>
    <div class="nav">
        <div class="jiedian">节点操作</div>
    </div>
    <script>
        var jiedian  = document.querySelector('.jiedian')
        console.log(jiedian.parentNode);
    </script>
</body>

在这里插入图片描述

子节点 children

获取所有元素的子元素节点

		 <div>
		        <ul>
		            <li></li>
		            <li></li>
		            <li></li>
		        </ul>
		        <ol>
		            <li></li>
		            <li></li>
		            <li></li>
		        </ol>
	  </div>
         // 获取子节点
        var ul = document.querySelector('ul')
        var lis =ul.querySelectorAll('li') 
        console.log(lis);
        // 简单方法 children 获取所有元素的子元素节点
        console.log(ul.children);

获取第一个和最后一个子元素节点

firstElementChild 返回第一个子元素节点兼容性IE9 才支持
lastElementChild 返回最后一个子元素节点兼容性IE9 才支持
element.children[0] 返回第一个子元素节点不考虑兼容问题
element.children.length - 1 返回最后一个子元素节点不考虑兼容问题

			 <div>
			        <ul>
			            <li>1</li>
			            <li>2</li>
			            <li>3</li>
			            <li>4</li>
			            <li>5</li>
			        </ul>
		    </div>
// 获取第一个和最后一个子元素节点
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length - 1 ]);
        // firstElementChild 返回第一个子元素节点 兼容性IE9  才支持
        console.log(ul.firstElementChild);
        console.log

最低0.47元/天解锁文章

MDR_0820

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 节点概述、父节点 parentNode、子节点children、兄弟节点、创建节点添加节点、删除节点、复制拷贝节点 ★案例★

一般节点至少拥有nodeType(节点类型）.nodeName(节点名称）和nodeValue(节点值）这三个基本属性元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）开发中节点操作主要操作的是元素节点父节点 parentNode获得里元素最近的父级节点<body> <div class="nav"> <div class="jiedian"&gt
复制链接

扫一扫