节点操做
node
数组
浏览器
app
函数
this
spa
网页中的全部内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。code
HTML DOM 树中的全部节点都可经过 JavaScript 进行访问，全部 HTML 元素（节点）都可被修改，也能够建立或删除。blog
事件
利用 DOM 树能够把节点划分为不一样的层级关系，常见的是父子兄层级关系。
node.parentNode
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 获得的是离元素最近的父级节点(亲爸爸) 若是找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
1. parentNode.childNodes（标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了全部的子节点，包括元素节点，文本节点等。
若是只想要得到里面的元素节点，则须要专门处理。 因此咱们通常不提倡使用childNodes
2. 子元素节点
2. parentNode.children（非标准）
parentNode.children 是一个只读属性，返回全部的子元素节点。它只返回子元素节点，其他节点不返 回 （这个是咱们重点掌握的）。
虽然children 是一个非标准，可是获得了各个浏览器的支持，所以咱们能够放心使用
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 全部的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取全部的子元素节点 也是咱们实际开发经常使用的
console.log(ul.children);
</script>
3.第一个子节点
3. parentNode.firstChild
firstChild 返回第一个子节点，找不到则返回null。一样，也是包含全部的节点。
4.最后一个子节点
4.parentNode.lastChild
lastChild 返回最后一个子节点，找不到则返回null。一样，也是包含全部的节点。
5.第一个子元素节点
5. parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null。
6.最后一个子元素节点
6. parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点，找不到则返回null。
注意：这两个方法有兼容性问题，IE9 以上才支持。
实际开发中，firstChild 和 lastChild 包含其余节点，操做不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么咱们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：
1. 若是想要第一个子元素节点，可使用 parentNode.chilren[0]
2. 若是想要最后一个子元素节点，可使用 parentNode.chilren[parentNode.chilren.length - 1]
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 无论是文本节点仍是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
1.5兄弟节点
1. node.nextSibling
nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。一样，也是包含全部的节点。
2. node.previousSibling
previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。一样，也是包含全部的节点。
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 获得下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
3. node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
4. node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
注意：这两个方法有兼容性问题， IE9 以上才支持。
5.问：如何解决兼容性问题 ？
答：本身封装一个兼容性的函数
function getNextElementSibling(element){
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
document.createElement('tagName')
document.createElement() 方法建立由 tagName 指定的 HTML 元素。由于这些元素原先不存在， 是根据咱们的需求动态生成的，因此咱们也称为动态建立元素节点
1. node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。相似于 CSS 里面的 after 伪元素。
2. node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。相似于 CSS 里面的 before 伪元素。
<ul>
<li>123</li>
</ul>
<script>
// 1. 建立节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 咱们想要页面添加一个新的元素 ： 1. 建立元素 2. 添加元素
</script>
node.removeChild(child)
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
node.cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本。
注意：
1. 若是括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点自己，不克隆里面的子节点。
2. 若是括号参数为 true ，则是深度拷贝，会复制节点自己以及里面全部的子节点。
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
<script>
// 三种建立元素方式区别
// 1. document.write() 建立元素 若是页面文档流加载完毕，再调用这句话会致使页面重绘
var btn = document.querySelector('button');
btn.onclick = function() {
document.write('<div>123</div>');
}
// 2. innerHTML 建立元素
var inner = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">百度</a>'
}
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 建立元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
</script>
<script>
function fn() {
var d1 = +new Date();
var str = '';
for (var i = 0; i < 1000; i++) {
document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
<script>
function fn() {
var d1 = +new Date();
for (var i = 0; i < 1000; i++) {
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '2px';
div.style.border = '1px solid red';
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
<script>
function fn() {
var d1 = +new Date();
var array = [];
for (var i = 0; i < 1000; i++) {
array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
- 1. 节点操做
- 2. jQuery节点操做
- 3. DOM 节点操做
- 4. DOM节点操做
- 5. js操做节点小结
- 6. 【Jquery】- DOM 节点操做
- 7. 节点List相关操做
- 8. rabbitmq集群节点操做
- 9. 树状节点操做
- 10. jQuery节点选择、操做
- 更多相关文章...
- • XML DOM 节点 - XML DOM 教程
- • XPath 节点 - XPath 教程
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
- • RxJava操作符（十）自定义操作符
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）
- 1. 节点操做
- 2. jQuery节点操做
- 3. DOM 节点操做
- 4. DOM节点操做
- 5. js操做节点小结
- 6. 【Jquery】- DOM 节点操做
- 7. 节点List相关操做
- 8. rabbitmq集群节点操做
- 9. 树状节点操做
- 10. jQuery节点选择、操做