JavaScript DOM节点概述及相关操作(获取节点 创建节点 插入节点 深拷贝 浅拷贝）
Posted 开到荼蘼223's
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM节点概述及相关操作(获取节点 创建节点 插入节点 深拷贝 浅拷贝）相关的知识，希望对你有一定的参考价值。
节点
一个html文档可以看作是一个节点树，网页中的所有内容都是节点，每一个节点都是一个对象，DOM节点有三个重要的属性：
nodeName 节点的名称
nodeType 节点的类型
1表示元素节点(标签)
2表示属性节点(标签的属性)
3表示文本节点(标签的内容)
nodeValue 节点的值
<body id="p1">
<h3>3号标题</h3>
<b>加粗文本</b>
<script>
var by = document.querySelector('#p1')
console.log('节点名称：'+by.nodeName); // BODY
console.log('节点类型：'+by.nodeType);// 节点的类型为1 表示标签
console.log('节点的值：'+by.nodeValue); // 节点的值为null
console.log('节点的父节点：'+by.parentNode);
console.log('节点的父节点名称：'+by.parentNode.nodeName);//返回父节点的名称 HTML
console.log(by.childNodes);// text, h3, text, b, text, script
console.log('第一个子节点：'+by.firstChild.nodeName); //#text
console.log('最后一个子节点：'+by.lastChild.nodeName);// script
console.log('前一个兄弟节点：'+by.previousSibling.nodeName); //#text
console.log('后一个兄弟节点:'+by.nextSibling);//body后没有节点了返回 null
</script>
</body>
DOM操作节点
创建新节点
- 通过creatElement创建元素节点(创建标签)
- 通过createTextNode(‘内容’)创建文本节点
- 通过appendChild方法将新创建的节点添加到当前节点的末尾
<script>
window.onload = function(){
//创建一个b标签
var tb = document.createElement('b');
//创建一个文本
var txt = document.createTextNode('你想填补的内容');
//将创建好的文本添加到标签b中
tb.appendChild(txt);
//将b标签添加到body标签中
document.body.appendChild(tb);
}
</script>
插入节点
insertBefore(new,ref) 将new节点插入到ref节点之前
<h3 id="h">内容上方填补</h3>
<form name="frm">
输入文本：<input type="text" name="txt">
<input type="button" value="插入节点" id="button">
</form>
<script>
function insertNode(){
var str = document.querySelector('input').value;
// 创建一个p标签
var newNode = document.createElement('p');
// 创建一个文本节点
var newTxt = document.createTextNode(str);
// 将文本节点插入到p标签中
newNode.appendChild(newTxt);
// 找到要插入的位置(找到id属性值为nodeid的标签)
var ref = document.querySelector('#h');
// 判断ref节点前面是否有父节点
if(ref.parentNode){
ref.parentNode.insertBefore(newNode,ref);
}
}
var btn = document.querySelector('#button');
btn.onclick = insertNode;
</script>
复制节点
复制节点：使用cloneNode(deep)方法
deep为true为深拷贝 false为浅拷贝
深拷贝 即复制当前节点及其所有子节点（默认值）
浅拷贝 只复制当前节点不复制其子节点
<select name="" id="sex">
<option value="">请选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
<br><br>
<hr>
<div id="d1"></div>
<button type="button" onclick="copyNode(false)">浅拷贝</button>
<button type="button" onclick="copyNode(true)">深拷贝</button>
<script>
function copyNode(bool){
// 获取select标签
var gender = document.querySelector('#sex');
// 将select标签进行复制
var newSex = gender.cloneNode(bool);
// 将select标签副本放入div中
var mydiv = document.querySelector('#d1');
mydiv.appendChild(newSex);
}
</script>
获取节点
childNodes 返回当前节点的所有子节点的集合(NodeList)，包括元素、文本、其他节点
children属性 只返回子元素节点的集合(HTMLCollection)
firstChild属性 获取第一个子节点(元素节点或文本节点)
firstElementChild属性 返回第一个子元素
lastChild属性 返回最后一个子节点(元素节点或文本节点)
nextSibling属性 返回后一个兄弟节点
previousSibling属性 返回前一个属性节点
nextElementSibiling属性 返回下一个兄弟节点
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<script>
var ul = document.querySelector('ul')
var lis = ul.querySelectorAll('li')
console.log(ul.childNodes)// 打印ul所有子节点 text, li, text, li, text, li, text, li, text, li, text
console.log(ul.childNodes[0].nodeType)//3文本 #text
console.log(ul.childNodes[1].nodeType)//1标签 li
console.log(ul.children)// li, li, li, li, li
console.log(ul.firstChild)// #text 输出ul的第一个子节点
console.log(ul.firstElementChild)// 第一个li
console.log(ul.lastChild)// #text
console.log(ul.children[0])// 返回第一个li 通用性更好
console.log(ul.nextSibling)// #text
console.log(ul.previousSibling)// text
</script>
以上是关于JavaScript DOM节点概述及相关操作(获取节点 创建节点 插入节点 深拷贝 浅拷贝）的主要内容，如果未能解决你的问题，请参考以下文章