JS DOM 操作
JS DOM 操作。
一、DOM 节点的获取。
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；
二、节点的关系查找
当前节点的父节点：
parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；
parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；
当前节点的子节点：
children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；
childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；
firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；
lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；
当前节点的兄弟节点：
previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<input type="text" />
<script>
const list = document.getElementsByClassName("list")[0];
const input = document.getElementsByTagName("input")[0];
console.log(list.parentNode, list.parentElement); // body body
console.log(list.childNodes, list.children); // Nodelist(11) HTMLCollection(5)
console.log(
list.firstChild, // #text
list.lastChild, // #text
list.firstElementChild, // li-1
list.lastElementChild // li-5
);
console.log(
input.previousSibling, // text
input.previousElementSibling, // ul
input.nextSibling, // text
input.nextElementSibling // script
);
</script>
</body>
</html>
三、元素属性的API
setAttribute(name,value)：设置属性值。
getAttribute(name)：返回对应属性名的值，不存在的话返回null。
hasAttribute(name)：判断是否有对应属性值，存在返回true，不存在返回false。
dataset：获取 data- 开头的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="yes" data-id="user" data-user="123245"></div>
<input type="text" />
<script>
const input = document.getElementsByTagName('input')[0];
const yes=document.getElementById('yes');
input.setAttribute('name','data');
console.log(input.getAttribute('name')) // data
console.log(input.hasAttribute('data'),input.hasAttribute('name')) // false true
console.log(yes.dataset.id,yes.dataset.user) // user 123245
yes.dataset.id='name'
console.log(yes.dataset.id) // name
</script>
</body>
</html>
四、创建节点和修改节点
创建节点：
createElement：创建元素。
createTextNode：创建文本节点。
cloneNode(true/false) ：克隆一个节点(true：复制子元素/false：不复制子元素)。克隆节点并不会克隆用 addEventListener 和 node.onclick=xxx; 方式绑定的事件
createDocumentFragment：本方法用来创建一个 DocumentFragment ，也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能。
修改节点：
appendChild(newChild:Element)：插入一个节点。
append(...nodes:(String|Node)[])：插入多个节点。
insertBefore(newNode,refNode)：在一个已有节点之前插入新的节点(已有节点拥有父节点)。
insertAdjacentHTML(Positon,string)：在固定位置插入HTML
beforebegin：element本身之前。afterbegin：就在element第一个孩子之前。beforeend：就在的element最后一个孩子之后。afterend：element本身之后。
removeChild(node)：用于删除指定的子节点并返回子节点
replaceChild(newChild:node,oldChild:node)：替换新旧节点。
一开始的页面
加入了JS的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<div id="yes" data-id="user" data-user="123245"></div>
<input type="text" />
<script>
const list=document.getElementsByClassName('list')[0];
const input = document.getElementsByTagName('input')[0];
const yes=document.getElementById('yes');
const ul=document.createElement('ul');
let text = document.createTextNode("我是文本节点");
let clone=list.cloneNode(true);
for(let i=list.children.length-1;i>=0;i--){
ul.appendChild(list.children[i])
}
document.body.append(ul,text);
document.body.insertBefore(clone,ul)
document.body.insertAdjacentHTML('afterbegin','开头')
console.log(document.body.removeChild(input)) // input
document.body.replaceChild(list,text);
</script>
</body>
</html>
浙公网安备 33010602011771号