JavaScript-节点操作

1. 节点概述

2. 节点层次

1）父级节点

2）子节点

下拉显示菜单案例

3）兄弟节点

4）创建节点

简单版发布留言案例

5）删除节点

6）复制节点（克隆节点）

8）三种动态创建元素区别

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:得到的是离元素最近的父级节点,没有则返回nullconsole.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显示出来，所以应该设置第二个子孩子displaythis.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');//添加元素//将输入的内容赋值给lili.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>

结果为：

JavaScript-节点操作相关推荐

3.JavaScript核心BOM操作学习（界面交互功能）——JavaScript获取自定义的方法，开始进行节点操作
今天事情比较多,学习的东西比较少第三天继续 H5新增获取自定义的方法 <body><div getTime="20" data-index="2&qu ...
html dom节点取父节点,JavaScript DOM父子兄节点操作必看详解
首先我们知道网页中的所有内容都是节点(标签.属性.文本.注释等) ,之前我们已经说过了一些元素的获取方法比如element.getElementById(),element.querySelecto ...
JavaScript——DOM之节点操作
节点操作前述: 一.节点的概述二.节点操作 1.节点层级 2.案列-下拉菜单 3.兄弟节点 4.创建节点 5.删除节点 6.案列 :留言并且删除节点 7.复制节点 8.案例:动态生成表格 9.三种 ...
Javascript 【操作元素、节点操作】
Javascript 4. 操作元素 4.5 排他思想案例:百度换肤案例:表格隔行变色案例:表单全选取消全选案例 4.6 自定义属性的操作 1. 获取属性值 2. 设置属性值 3. 移除属性案 ...
JavaScript的节点操作 —— 增加节点
目录 JavaScript中的节点操作分为:增.删.改.查(获取),四大类型. 我们直接利用案例来学习: HTML布局代码: JavaScript代码实现: 第一步:获取所有要用到的元素对象(可以利用 ...
JavaScript里的父、子节点操作源码解析
父.子节点操作.兄弟节点 1.节点概述 <!DOCTYPE html> <html lang="en"><head><meta chars ...
JavaScript 节点及层级操作
节点操作 var body = document.body; var div = document.createElement('div'); body.appendChild(div);var fi ...
javascript中节点操作、节点属性、节点获取、创建节点、删除节点、克隆节点
节点操作节点操作实际是利用DOM树把节点划分为不同的层次关系,常见父子兄弟级关系节点属性: 节点一般有三个属性:nodeType节点类型(其中元素节点值为1,属性节点值为2,文本节点值为3).no ...
常见的原生javascript DOM操作
1.创建元素创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

JavaScript-节点操作

1. 节点概述

2. 节点层次

1）父级节点

2）子节点

下拉显示菜单案例

3）兄弟节点

4）创建节点

简单版发布留言案例

5）删除节点

6）复制节点（克隆节点）

8）三种动态创建元素区别

JavaScript-节点操作相关推荐

最新文章

热门文章

JavaScript-节点操作

1. 节点概述

2. 节点层次

1）父级节点

2）子节点

下拉显示菜单案例

3）兄弟节点

4）创建节点

简单版发布留言案例

5） 删除节点

6）复制节点（克隆节点）

8）三种动态创建元素区别

JavaScript-节点操作相关推荐

最新文章

热门文章

5）删除节点