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名称