JavaScript-节点操作_<script>对节点的操作-程序员宅基地
技术标签： 前端 html javascript
目录
1. 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值） 这三个基本属性。
- 元素节点 nodeType：1
- 属性节点 nodeType：2
- 文本节点 nodeType：3（文本节点包括文字、空格、换行等）
2. 节点层次
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1）父级节点
- node.parentNode
- 得到的是离元素最近的父级节点
- 如果指定的节点没有父节点则返回null
<body>
<div class="box">
<span class="num">1</span>
</div>
<div class="container"></div>
<script>
var num = document.querySelector('.num');
//node.parentNode:得到的是离元素最近的父级节点,没有则返回null
console.log(num.parentNode);
var container = document.querySelector('.container');
console.log(container.parentNode);
</script>
</body>结果为：
2）子节点
- parentNode.childNodes（标准）：得到的节点包括元素节点、文本节点等
- parentNode.children（非标准）：是一个只读属性，返回所有的子元素节点
- parentNode.firstChild：返回第一个子节点，找不到则返回null，包含所有的节点
- parentNode.firstElementChild：返回第一个子节点，IE9以上才支持
- parentNode.lastChild：返回最后一个子节点，找不到则返回null，包含所有的节点
- parentNode.firstElementChild：返回最后一个子节点，IE9以上才支持
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector('ul');
var lis = ul.querySelector('li');
//1.parentNode.childNodes（标准）：得到的节点包括元素节点、文本节点等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType); //3,表示为文本节点
console.log(ul.childNodes[1].nodeType); //1,表示为元素节点
//2.parentNode.children（非标准）：是一个只读属性，返回所有的子元素节点
console.log(ul.children);
//3.parentNode.firstChild：返回第一个子节点，找不到则返回null，包含所有的节点
console.log(ul.firstChild);
//4.parentNode.firstElementChild：返回第一个子节点，IE9以上才支持
console.log(ul.firstElementChild);
//5.parentNode.lastChild：返回最后一个子节点，找不到则返回null，包含所有的节点
console.log(ul.lastChild);
//6.parentNode.firstElementChild：返回最后一个子节点，IE9以上才支持
console.log(ul.lastElementChild);
</script>
</body>结果为：
下拉显示菜单案例
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.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: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
</ul>
<script>
//1.获取元素
var nav = document.querySelector('.nav');
//返回所有的子节点，只包括元素节点
var lis = nav.children;
//2.注册事件 处理程序
for(var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
//ul有两个子孩子->a和ul，要使得鼠标经过时ul显示出来，所以应该设置第二个子孩子display
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>结果为：当鼠标经过时，下拉的菜单就会显示；反之则隐藏起来
3）兄弟节点
- node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null，包含所有的节点
- node.previousSibling：返回当前元素的上一个兄弟节点，找不到则返回null，也是包含所有的节点
- node.nextElementSibling：返回当前元素下一个兄弟元素节点，找不到则返回null，IE9以上才支持
- node.previousElementSibling：返回当前元素上一个兄弟节点，找不到则返回null，IE9以上才支持
<body>
<div>1</div>
<span>2</span>
<script>
var div = document.querySelector('div');
//1.nextSibling:返回当前元素的下一个兄弟节点，包含所有节点
console.log(div.nextSibling);
//2.previousSibling:返回当前元素的上一个兄弟节点，包含所有节点
console.log(div.previousSibling);
//3.nextElementSibling:返回当前元素的下一个兄弟节点，兼容性问题（IE9以上才支持）
console.log(div.nextElementSibling);
//4.previousElementSibling:返回当前元素的上一个兄弟节点，兼容性问题（IE9以上才支持）
console.log(div.previousElementSibling);
</script>
</body>结果为：
4）创建节点
- document.createElement('tagName')：创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据需求动态生成的，所谓也称为动态创建元素节点
- node.appendChild()：将一个节点添加到指定父节点的子节点列表末尾，类似于CSS的after元素 父节点.appendChild(子节点);->在后面追加元素
- node.insertBefore(child, 指定元素)：将一个节点添加到父节点的指定子节点前面，类似于CSS里面的子元素。
<body>
<ul>
<li>1</li>
</ul>
<script>
var ul = document.querySelector('ul');
//1.创建节点元素
var li = document.createElement('li');
//2.添加节点：parent.appendChild(child) 在末尾追加元素
ul.appendChild(li);
//3.添加节点：node.insertBefore(child, 指定元素) 在指定父节点的子节点前面追加元素
var li1 = document.createElement('li');
ul.insertBefore(li1, ul.children[0]);
</script>
</body>结果为：
简单版发布留言案例
<style>
textarea {
border: 1px solid #000;
}
li {
background-color: pink;
}
</style>
</head>
<body>
<textarea cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
//1.获取元素
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
//2.注册事件 处理程序
btn.onclick = function() {
if (text.value == '') {
alert('您没有输入留言');
return false;
}
else {
//创建元素
var li = document.createElement('li');
//添加元素
//将输入的内容赋值给li
li.innerHTML = text.value;
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
</script>
</body>结果为：
5） 删除节点
- node.removeChild(child)：从DOM中删除一个子节点，返回删除的节点
<body>
<button>删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//1.获取对象
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
//2.注册事件 处理程序
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
}
else {
ul.removeChild(ul.children[0]);
}
}
</script>
</body>结果为：
6）复制节点（克隆节点）
node.cloneNode()：返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
- 如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点内容
- 如果括号参数true，则是深拷贝，即既克隆复制节点本身，又克隆里面的子节点内容
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//获取对象
var ul = document.querySelector('ul');
//1.cloneNode()：参数为空或者是false，浅拷贝，只复制节点不复制文本内容
var li = ul.children[0].cloneNode();
//2.cloneNode(true)：参数为true，深拷贝，只复制节点同时复制文本内容
var li1 = ul.children[1].cloneNode(true);
ul.appendChild(li);
ul.appendChild(li1);
</script>
</body>结果为：
8）三种动态创建元素区别
- document.write()：直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘
- element.innerHTML：将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- document.createElement()：创建多个元素效率稍低一点，但是结构更清晰
<body>
<button>btn</button>
<span>1</span>
<script>
var btn = document.querySelector('button');
btn.onclick = function() {
//直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘->button和span不在页面上
document.write('<div>123</div>');
}
</script>
</body>结果为：
智能推荐
机器学习模型评分总结（sklearn）_model.score-程序员宅基地
文章浏览阅读1.5w次，点赞10次，收藏129次。文章目录目录模型评估评价指标1.分类评价指标acc、recall、F1、混淆矩阵、分类综合报告1.准确率方式一：accuracy_score方式二：metrics2.召回率3.F1分数4.混淆矩阵5.分类报告6.kappa scoreROC1.ROC计算2.ROC曲线3.具体实例2.回归评价指标3.聚类评价指标1.Adjusted Rand index 调整兰德系数2.Mutual Informa..._model.score
Apache虚拟主机配置mod_jk_apache mod_jk 虚拟-程序员宅基地
文章浏览阅读344次。因工作需要，在Apache上使用，重新学习配置mod_jk1. 分别安装Apache和Tomcat：2. 编辑httpd-vhosts.conf： LoadModule jk_module modules/mod_jk.so #加载mod_jk模块 JkWorkersFile conf/workers.properties #添加worker信息 JkLogFil_apache mod_jk 虚拟
Android ConstraintLayout2.0 过度动画MotionLayout MotionScene3_android onoffsetchanged-程序员宅基地
文章浏览阅读335次。待老夫kotlin大成,扩展:MotionLayout 与 CoordinatorLayout,DrawerLayout,ViewPager 的 交互众所周知,MotionLayout 的 动画是有完成度的 即Progress ,他在0-1之间变化,一.CoordinatorLayout 与AppBarLayout 交互时,其实就是监听 offsetliner 这个 偏移量的变化 同样..._android onoffsetchanged
【转】多核处理器的工作原理及优缺点_多核处理器怎么工作-程序员宅基地
文章浏览阅读8.3k次，点赞3次，收藏19次。【转】多核处理器的工作原理及优缺点《处理器关于多核概念与区别 多核处理器工作原理及优缺点》原文传送门 摘要：目前关于处理器的单核、双核和多核已经得到了普遍的运用，今天我们主要说说关于多核处理器的一些相关概念，它的工作与那里以及优缺点而展开的分析。1、多核处理器 多核处理器是指在一枚处理器中集成两个或多个完整的计算引擎（内核），此时处理器能支持系统总线上的多个处理器，由总..._多核处理器怎么工作
个人小结---eclipse/myeclipse配置lombok_eclispe每次运行个新项目都需要重新配置lombok吗-程序员宅基地
文章浏览阅读306次。1. eclipse配置lombok 拷贝lombok.jar到eclipse.ini同级文件夹下，编辑eclipse.ini文件，添加: -javaagent:lombok.jar2. myeclipse配置lombok myeclipse像eclipse配置后，定义对象后，直接访问方法，可能会出现飘红的报错。 如果出现报错，可按照以下方式解决。 ..._eclispe每次运行个新项目都需要重新配置lombok吗
【最新实用版】Python批量将pdf文本提取并存储到txt文件中_python批量读取文字并批量保存-程序员宅基地
文章浏览阅读1.2w次，点赞31次，收藏126次。#注意：笔者在2021/11/11当天调试过这个代码是可用的，由于pdfminer版本的更新，网络上大多数的语法没有更新，我也是找了好久的文章才修正了我的代码，仅供学习参考。1、把pdf文件移动到本代码文件的同一个目录下，笔者是在pycharm里面运行的项目，下图中的x1文件夹存储了我需要转换成文本文件的所有pdf文件。然后要在此目录下创建一个存放转换后的txt文件的文件夹，如图中的txt文件夹。2、编写代码 （1）导入所需库# coding:utf-8import ..._python批量读取文字并批量保存
随便推点
Scala:访问修饰符、运算符和循环_scala ===运算符-程序员宅基地
文章浏览阅读1.4k次。http://blog.csdn.net/pipisorry/article/details/52902234Scala 访问修饰符Scala 访问修饰符基本和Java的一样，分别有：private，protected，public。如果没有指定访问修饰符符，默认情况下，Scala对象的访问级别都是 public。Scala 中的 private 限定符，比 Java 更严格，在嵌套类情况下，外层_scala ===运算符
MySQL导出ER图为图片或PDF_数据库怎么导出er图-程序员宅基地
文章浏览阅读2.6k次，点赞7次，收藏19次。ER图导出为PDF或图片格式_数据库怎么导出er图
oracle触发器修改同一张表,oracle触发器中对同一张表进行更新再查询时，需加自制事务...-程序员宅基地
文章浏览阅读655次。CREATE OR REPLACE TRIGGER Trg_ReimFactBEFORE UPDATEON BP_OrderFOR EACH ROWDECLAREPRAGMA AUTONOMOUS_TRANSACTION;--自制事务fc varchar2(255);BEGINIF ( :NEW.orderstate = 2AND :NEW.TransState = 1 ) THENBEG..._oracle触发器更新同一张表
debounce与throttle区别及其应用场景_throttle和debounce应用在哪些场景-程序员宅基地
文章浏览阅读513次。目录概念debouncethrottle实现debouncethrottle应用场景debouncethrottle场景举例debouncethrottle概念debounce字面理解是“防抖”，何谓“防抖”，就是连续操作结束后再执行，以网页滚动为例，debounce要等到用户停止滚动后才执行，将连续多次执行合并为一次执行。throttle字面理解是“节流”，何谓“节流”，就是确保一段时..._throttle和debounce应用在哪些场景
java操作mongdb【超详细】_java 操作mongodb-程序员宅基地
文章浏览阅读526次。regex() $regex 正则表达式用于模式匹配，基本上是用于文档中的发现字符串 （下面有例子）注意：若未加 @Field("名称") ，则识别mongdb集合中的key名为实体类属性名。也可以对数组进行索引，如果被索引的列是数组时，MongoDB会索引这个数组中的每一个元素。也可以对整个Document进行索引，排序是预定义的按插入BSON数据的先后升序排列。save: 若新增数据的主键已经存在，则会对当前已经存在的数据进行修改操作。_java 操作mongodb
github push 推送代码失败. 使用ssh rsa key. remote: Support for password authentication was removed._git push remote: support for password authenticati-程序员宅基地
文章浏览阅读1k次。今天push代码到github仓库时出现这个报错TACKCHEN-MB0:tc-image tackchen$ git pushremote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.remote: Please see https://github.blog/2020-12-15-token-authentication_git push remote: support for password authentication was removed on august 1