获取DOM节点及节点关系、DOM操作

DOM节点

获取DOM节点

document.getElementsByName();(主要用于表单)，通过Name，获取元素。最终获取的是NodeList。所以所有表单最好都加上name属性。

NodeList是通过forEach方法遍历的。
nodeList是有forEach方法遍历
var list=document.getElementsByName(“sex”);
list.forEach(function(item){
console.log(item);
})

document.getElementById(“id”) 通过id获取元素
document.getElementsByTagName(“div”) 通过标签名获取标签列表,只能通过document获取，HTMLCollection
document.getElementsByClassName(“div1”) 通过class名获取标签列表，任何标签可以获取其子项中class列表

document.querySelector(所有选择器);
document.querySelector("#div0");
document.querySelector("[type=text]");
父容器.querySelector();
document.querySelectorAll(所有选择器);

节点关系

console.log(document.body.children);//所有子元素的列表
console.log(document.body.childNodes);//所有子节点列表
console.log(document.body.firstChild);//第一个子节点
console.log(document.body.firstElementChild);//第一个子元素
console.log(document.body.lastChild);//最后一个子节点
console.log(document.body.lastElementChild);//最后一个子元素
console.log(document.body.lastElementChild.previousSibling);//上一个兄弟节点
console.log(document.body.lastElementChild.previousElementSibling);//上一个兄弟元素
console.log(document.body.firstElementChild.nextSibling);//下一个兄弟节点
console.log(document.body.firstElementChild.nextElementSibling);//下一个兄弟元素
console.log(document.body.firstChild.parentNode);//父节点
console.log(document.body.firstChild.parentElement);//父元素

DOM操作

插入

var div=document.createElement(“div”);
div.textContent=“你好”;//给div设置文本内容，不能加html标签

父容器.insertBefore(要插入的元素，插入在谁的前面)
div.insertBefore(div,document.body.firstChild);

插入在子元素的最尾部
// div0.appendChild(span);
插入在子元素的最前面
// div0.insertBefore(span,div0.firstChild);

创建文本节点
var txt=document.createTextNode(“你好”)

替换

父容器.replaceChild(新的子元素，要替换掉旧元素)
div0.replaceChild(p,div0.firstElementChild);

删除节点

父容器.removeChild(子元素);
子元素.remove();
在删除时，元素仅仅是从页面中删除，不是从内存中删除。
如果在没有清除内存的情况下(null)，还可以加入回去。div=null;需要在设置值null之前将事件删除，否则事件会一直存在

div0.textContent="";
div0.innerHTML=""; 删除div0里的所有内容

复制

复制元素=复制目标.cloneNode(深浅复制)
true：深复制，复制元素和元素的子元素和节点
false：浅复制，仅复制当前元素

var span2=span1.cloneNode(false);
复制标签时，会将标签的属性一起复制。
span2.id=“span2”; id是不能相同的，所以在复制完标签后要更改id名称