DOM的基础知识点01

Posted 2020-12-18 yongjingsong

Document Object Model

DOM0

DOM1 1998 年 w3c标准

DOM2 2000 年（ 主讲）

DOM3 2004 年（ 主讲）

DOM4 2015 年

 

节点Node：元素、标签

节点名称 节点类型 节点的值

NodeName NodeType NodeValue

元素节点 标签名 1 null

文本节点 #text 3 文本内容

属性节点 属性名 2 属性值

通过ID值获取元素

get获取

Element元素

By通过

Id

获取节点

let artSpan = document.querySelector(`article span`) //通过选择器来查找，如果页面涉及到删除和添加标签时，就不要用querySelector来获取标签
console.log(artSpan);
?
?
let artSpanNode = document.querySelectorAll(`article span`) 
console.log(artSpanNode);

以上两种方法的特点：1、IE8以下不支持 2、无法实时返回数据（如：删除、增加）

?
let spanNode = document.querySelector(`article>header>nav>span:nth-child(2)`)
console.log(spanNode);
?
//选择下一个
console.log(spanNode.nextSibling);//#text 文本节点
console.log(spanNode.nextElementSibling);//获取下一个元素节点（不是文本节点）
console.log(spanNode.nextSibling.nextSibling);//选中spanNode的下一个
?
//选择上一个
console.log(spanNode.previousSibling.previousSibling);//选中spanNode的上一个
console.log(spanNode.previousSibling);//#text 文本节点
console.log(spanNode.previousElementSibling);//获取上一个元素节点（不是文本节点）
?
//获取父元素
console.log(spanNode.parentNode);
?
let faNode = spanNode.parentNode;
//获取子元素
console.log(faNode.children);//nav的所有子元素（节点）
console.log(faNode.firstChild);//第一个节点，并且该节点是文本节点#text
console.log(faNode.lastChild);//第一个节点，并且该节点是文本节点#text

.innerhtml和.innerText

.innerText 把所有内容当字符串的方式显示到节点的内容中

.innerHTML 把所有内容当字符串的方式显示到节点的内容中

注：如果字符串中包含标签，innerHTML会识别成元素，innerText会当普通文本。

新增节点

step1：节点名称

书写方式：document.createElement("标签名");

let headerEle = document.createElement("header");
console.log(headerEle);

step2:元素内容（创建文本节点）

let headerText = document.createTextNode = "F68";
?

step3:添加文本节点

headerEle.appendChild(headerText);
console.log(headerEle.innerText);
?

step4：添加节点

artEle.appendChild(headerEle);

插入节点

第一步//获取父节点
let pEle = document.getElementsByClassName("box2")[0];
第二步//获取被插入节点 A
let emEle = document.getElementsByClassName("haha")[0];
第三步//创建插入节点  B
let spanEle = document.createElement("span");
第四步//插入新创建的节点
pEle.insertBefore(spanEle,emEle);

书写格式：

父节点.insertBefore(B,A)