DOM

DOM(Document Object Model)文档对象模型

功能：操作HTML元素

 

 

节点（node）

nodeName nodeValue nodeType

1.元素节点 标签名 null

2.文本节点 #text 123

3.属性节点 属性名 属性值

4.注释节点 comments 注释的内容

快捷获取节点的方式

TagName:标签名

let navEle =document.getElementsByTagName(`nav`)[0];

Name通过name值获取元素

注：不止input可以添加name属性

let navEle = document.getElementsByName(`nav`);

 

ClassName

let foEle= document.getElementsByClassName(`box`);

console.log(foEle[0]);

 

ES6通过CSS选择器的方式获取元素

注：querySelector和querySelectorAll不是实时的，即一直保留获取节点那一刻的内容，即后面对节点的任何操作都没有效果。即依然使用获取节点那一刻的内容

querySelector

返回第一个满足的元素

let navEle2=document.querySelector(header>nav);

querySelectorAll

返回所有满足条件的元素

let navEle2=document.querySelectorAll(header>nav);

 

【获取父元素节点】

书写格式：子元素.parentNode；

letnavEle2=document.querySelector(`header>nav`);

let faEle=navEle2.parentNode;

console.log(faEle);

【获取子节点】

获取第一个节点

let faEle=navEle2.parentNode;

let i = faEle.firstChild;

console.log(i);

获取最后一个节点

let faEle=navEle2.parentNode;

let i=faEle.lastChild;

console.log(i);

 

【获取子元素节点】

获取第一个子元素节点

let faEle=navEle2.parentNode;

let i = faEle.firstElementChild;

console.log(i);

获取最后一个子元素节点

let faEle=navEle2.parentNode;

let i = faEle.lastElementChild;

console.log(i);

 

获取所有节点

let allEle=faEle.childNodes;

console.log(allEle);

 

获取所有子元素节点

allEle=faEle.children;

console.log(allEle);

 

【获取兄弟节点】

获取下一个

let navEle2=document.querySelector(`header>nav`);

let faEle=navEle2.parentNode;

let str=faEle.nextSibling;

console.log(str);

获取上一个

let navEle2=document.querySelector(`header>nav`);

let faEle=navEle2.parentNode;

let str=faEle.previousSibling;

console.log(str);

【获取兄弟元素】

获取下一个

let navEle2=document.querySelector(`header>nav`);

let faEle=navEle2.parentNode;

let str=faEle.nextElementSibling;

console.log(str);

获取上一个

let navEle2=document.querySelector(`header>nav`);

let faEle=navEle2.parentNode;

let str=faEle.previousElementSibling;

console.log(str);

 

【属性节点】

获取属性值 :

元素节点.getAttribute（属性名）

例子

let selEle=document.getElementsByTagName(`section`);

let temp = selEle[0].getAttribute(`class`);

console.log(temp);

【判断是否存在要查找的属性】

元素节点.hasAttribute(属性名)

例子

let selEle=document.getElementsByTagName(`section`);

console.log(selEle[0].hasAttribute(`class`));

 

【快捷获取属性值 】

节点.属性名

注：class是关键字，因此使用className

let selEle=document.getElementsByTagName(`section`);

console.log(selEle[0].className);

【获取class的值】（0到多个）

classList获取元素节点类名集合，通过下标获取相应的值，可以在原有类名的基础上，再添加新的类名

【判断是否包含要查找的类名】

书写格式：元素节点.classList.contains(`查找的类名`)

【删除classList里的类名】

书写格式：元素节点.classList.remove(`删除的类名`)

【toggle方法】

书写格式：有类型则删除，没有则添加

返回Boolean值

【新增或修改属性】

如果存在要新增的属性，则为修改

如果不存在要添加的属性，则为新增

let selEle=document.getElementsByTagName(`section`);

selEle[1].setAttribute(`data-ll`,`123`)

console.log(selEle[1]);

【删除属性】

书写格式：

元素节点.removeAttribute(属性名)

 

【自定义属性】

获取自定义属性值

书写格式：元素节点.dataset.自定义属性名

例子：

let pEle=document.getElementsByTagName(`p`)[0];

console.log(pEle.dataset.index);

 

 

 

快捷新增或修改节点

新增元素节点

【创建新节点】

-创建元素节点

-创建文本节点

-把文本节点添加到元素节点

-添加子节点书写格式：

父元素节点.appendChild(子节点);

创建元素节点书写格式：

document.createElement(`标签名`)

创建文本节点书写格式式：

document.createTextNode(`文本内容`)

【添加节点】

appendChild（节点）如果添加的节点是新增的，则是添加到元素里，如果添加的节点是已经存在的，则是剪切到元素的最后面

-获取被添加的元素节点A

-把创建的节点，添加到A（即为A的子节点）

A.appendChild(子节点);

 

 

 

 

创建注释节点

例子

let comEle=document.createComment(`Hello`);

let secEle=document.getElementsByTagName(`section`)[0];

secEle.appendChild(comEle);

【插入节点】

获取元素节点

1.父元素节点

2.插入节点

3.插入到那个元素之前

书写格式：父元素节点.insertBefore（A，B）

注：A是插入节点，B是插入到那个元素前

如果A是新建的节点，则是插入，如果A是已有的节点，则从原来的位置移动到B之前

例子

let comEle=document.createComment(`Hello`);

let secEle=document.getElementsByTagName(`section`)[0];

secEle.appendChild(comEle);

let pEle=document.getElementsByTagName(`p`)[0];

secEle.insertBefore(comEle,pEle);

【替换节点】

获取元素节点

1.父元素节点

2.替换节点

3.被替换的节点

书写格式：父元素节点.replaceChild（A，B）

注：A是替换节点，B是被替换的节点

如果A是新建的节点，则替换B，如果A是已有的节点，则从原来的位置移动到B的位置替换

 

【删除节点】

书写格式：节点名.remove();

如果删除的是父节点，会把自己和后代一起删除

 

【克隆节点】

书写格式：标识符=节点名.cloneNode(true或者false)

深克隆：参数true，表示会把子节点和后代节点一同克隆

牵克隆：参数false，只克隆当前节点，不会把子节点和后代节点一同克隆

例子

let artEle = document.getElementsByTagName(`article`)[0];

let asEle = document.getElementsByTagName(`aside`)[0];

function kelong() {

let kEle = asEle.cloneNode(true);

artEle.appendChild(kEle);

}

 

 

【节点样式】

设置节点样式

书写格式：节点名.style.CSS属性名=属性值

例子

let heEle=document.getElementsByTagName(`header`)[0];

heEle.style.width=100+`px`;

heEle.style.height=100+`px`;

heEle.style.backgroundColor=`skyblue`;

获取节点样式

console.log(`${heEle.nodeName}元素的宽度为：${heEle.style.width}`);

console.log(`${heEle.localName}元素的宽度为：${heEle.style.width}`);

 

 

window.getComputedStyle和节点.style的区别

节点.style获取的是行内样式，可读，可改

 

window.getComputedStyle（参数1，参数2）

获取的是最终样式，只读

参数1:元素节点

参数2:取值null，表示取参数1的最终样式

“before”或“after”表示获取参数1的伪元素的最终样式

 

获取节点某个属性值

window.getComputedStyle（参数1，参数2）.属性名