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>结果为：
智能推荐
2014年高级计算机操作员工种代码36-323不可积分入户深圳吗,计算机操作员 （2011年深圳招调工热门工种）...-程序员宅基地
文章浏览阅读198次。好消息：计算机操作员(工种代码：46-207)被确定为2011年深圳市职业技能鉴定计算机类鉴定工种学习对象：Office2003综合应用：1、向有一定电脑基础，特别是对OFFICE办公软件有一定了解，欲从事计算机日常办公的人员进行培训.2、此科目是深圳市招调工种.图形图像处理CorelDraw X3：1、从事或有意从事工艺美术、广告艺术、图文排版、图文印刷、计算机多媒体技术工作人员以及其他需要掌握..._计算机操作员职业代码
文心一言api接入如何在你的项目里使用文心一言_文言一心api-程序员宅基地
文章浏览阅读7.5k次，点赞6次，收藏47次。基于百度文心一言语言大模型的智能文本对话AI机器人API,支持聊天对话、行业咨询、语言学习、代码编写等功能.您的AppKey和uid是重要信息,请务必妥善保存,避免泄漏!您的AppKey和uid是重要信息,请务必妥善保存,避免泄漏!您的AppKey和uid是重要信息,请务必妥善保存,避免泄漏!AppKey申请通过后,登录。请求方式: POST。_文言一心api
别再用硬编码写业务流程了，试试这款轻量级流程编排框架-程序员宅基地
文章浏览阅读488次。前言在每个公司的系统中，总有一些拥有复杂业务逻辑的系统，这些系统承载着核心业务逻辑，几乎每个需求都和这些核心业务有关，这些核心业务业务逻辑冗长，涉及内部逻辑运算，缓存操作，持久化操作，外部..._什么业务场景要用到编排工具
P1015 回文数_1、若一个5位数字从左向右读与从右向左读都一样,我们就将其称之为回文串。小申编-程序员宅基地
文章浏览阅读297次。题目描述若一个数（首位不为零）从左向右读与从右向左读都一样，我们就将其称之为回文数。例如：给定一个十进制数5656，将5656加6565（即把5656从右向左读），得到121121是一个回文数。又如：对于十进制数8787：STEP1：8787+7878=165165STEP2：165165+561561=726726STEP3：726726+627627=13531..._1、若一个5位数字从左向右读与从右向左读都一样,我们就将其称之为回文串。小申编
直线与球体的交点lisp_晓东CAD家园-论坛-A/VLISP-[LISP函数]：计算直线与曲线交点-:5 如何用Lisp程序计算支线Line与曲线（二次样条或PLINE拟合曲线）三交点，请诸位高手提...-程序员宅基地
文章浏览阅读389次。[font=courier new]86. xdrx_getinters功能：1.求两个AcDbCurve(曲线)实体的交点.2.求一个AcDbCurve(曲线)实体和一个选择集中所有AcDbCurve(曲线)的交点。3.求一个选择集中所有AcDbCurve(曲线)实体的交点.4.求一个选择集SS1中的所有AcDbCurve实体和另个选择集SS2所有AcDbCurve实体的交点。调用格式： 1. ..._lisp inters
HDU 1198 - Farm Irrigation-程序员宅基地
文章浏览阅读44次。Problem DescriptionBenny has a spacious farm land to irrigate. The farm land is a rectangle, and is divided into a lot of samll squares. Water pipes are placed in these squares. Different square has...
随便推点
Axis2/c 知识点-程序员宅基地
文章浏览阅读145次。官网文档： http://axis.apache.org/axis2/c/core/docs/axis2c_manual.html从文档中可以总结出：1. Axis2/C是一个用C语言实现的Web Service引擎。Axis2/C基于Axis2架构，支持SOAP1.1和SOAP1.2协议，并且支持RESTful风格的Web Service。基于Axis2/C的Web Service可以..._axis2/c服务端调用axis2_get_instance
企业架构方法论-程序员宅基地
文章浏览阅读3k次。目前主要的两种架构方法（准确的说是方法论），具体的方法也是有的，也有可实际操作层面的东西，那要看很多的各个细分专业层面的东西。比如画流程图，业务流程图、数据流程图、系统交互流程图等等。togafzachmanzachman业务建模分析框架，相比于togaf，直观上直接提供了可操作的东西，可能大家更容易接受一些。这里推荐一个架构设计的专业工具，是免费的，即ArchMateArchi – Open Source ArchiMate Modelling (archim..._企业架构方法论
堆栈与队列的方法区分、优先队列的应用_判断是栈还是队列还是优先队列-程序员宅基地
文章浏览阅读123次。堆栈与队列具体的方法区分_判断是栈还是队列还是优先队列
上海计算机学会2021年7月月赛C++丙组T1布置会场-程序员宅基地
文章浏览阅读352次，点赞8次，收藏8次。小爱老师可以购买两份双拼花束后，将他重新组合成一束百合花+一束郁金香。已知布置会场需要用到x束百合花与y束郁金香，请问小爱老师购买花朵最少花费需多少元？输出共一行，一个正整数，表示小爱老师购买花朵最少花费需多少元。直接购买8束百合+6束郁金香，共计8*8+6*10=124元。内存限制: 256 Mb时间限制: 1000 ms。先购买12束双拼花朵，花费12*8=96元，第一行：两个正整数表示需要的花束数量x,y。第二行：三个正整数表示花束费用a,b,c。再购买2束百合花，花费2*8=16元，
python实现ping某一ip_使用Python测试Ping主机IP和某端口是否开放的实例-程序员宅基地
文章浏览阅读518次。使用Python方法比用各种命令方便，可以设置超时时间，到底通不通，端口是否开放一眼能看出来。命令和返回完整权限，可以ping通，端口开放，结果如下：无root权限(省略了ping)，端口开放，结果如下：完整权限，可以ping通，远端端口关闭，结果如下：完整权限，可以ping通，本地端口关闭，结果如下：完整权限，不能ping通(端口自然也无法访问)，结果如下：pnp.py代码#!/usr/bin/..._python ping ip无管理员权限
zplane函数怎么用m文件调用_matlab中cla用法-程序员宅基地
文章浏览阅读738次。零极点与系统稳定性的关系 4.状态方程含义 5.使用 zplane 函数 [实验原理] 该实验用 MATLAB 中库函数,如 tf2zp(b,a),ss2zp(A,B,C,D),zplane(z,p),......MATLAB 中相关命令 aa abs 绝对值、模、字符的 ascii 码值 a...零极点与系统稳定性的关系 4.状态方程含义 5.使用 zplane 函数 [实验原理] 该实验用 M..._matlabcla。m文件