DOM

最新推荐文章于 2021-09-23 21:22:24 发布

爱吃香菜的girl

最新推荐文章于 2021-09-23 21:22:24 发布

阅读量106

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_49715910/article/details/108817369

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

DOM

Document Object Model 文档对象模型
功能：操作HTML元素
DOM历史
DOM 0
DOM 1 1998年
DOM 2 2000年
DOM 3 2004年
DOM 4 2015年

节点：（Node)

```
    NodeName NodeType  NodeValue 
```
元素节点标签名 1 null
属性节点属性名 2 属性值
文本节点 #text 3 文本内容

快速获取节点的方式

根据标签名进行元素的获取，由于HTML中可以存在多个相同的标签名元素，
因此接收的变量是可以存储多个数据的类数组，通过下标获取具体内容。

获取元素 getElementsByTagName
let ulEle=document.getElementsByTagName(‘ul’);
console.log( ulEle[0]);
通过直接获取子元素获取元素里的子元素 document.getElementsByTagName(‘li’);
let ulEle=document.getElementsByTagName(‘li’);
console.log( ulEle[3]);
通过iD值获取元素 document.getElementById
let ulEle=document.getElementById(“box”);
console.log(ulEle)
通过class获取元素 document.getElementsByClassName(box1)
let leuName=document.getElementsByClassName(box1)
console.log(leuName[1]);
通过name的属性值获取元素 ???
let input=document.getElementsByName(“f70”)
console.log(input)

querySelector返回第一个小括号里需求的元素
querySelectorAll 返回满足小括号里需求的元素
注：不能对元素进行实时更新

let areEle=document.querySelector(“article”);
console.log(areEle)
空？？？？？
// let areEle1=document.querySelector(“article>setion”);
// console.log(areEle1)
子级选中全部p
let areEle=document.querySelectorAll(‘article>section>p’)
console.log(areEle)
后代选择全部p
let areEle=document.querySelectorAll(‘article p’)
console.log(areEle)
选中第三个section
// let areEle=document.querySelectorAll(‘article>section:nth-child(3)’)
// console.log(areEle[0])
选中第五个section下的第二个p
// let areEle1=document.querySelectorAll(‘article>section:nth-child(5)>p:nth-child(2)’)
// console.log(areEle1[0])
/**

获取父元素（子元素）
1，获取一个元素（子元素）
2，通过这个元素找到父元素

*/
let navEle = document.getElementsByTagName(“nav”)[0];
console.log(navEle)
父元素节点 parentNode
//书写格式：子元素.parentNode
let headerEle = navEle.parentNode;
console.log(headerEle)
//获取子元素节点，
//书写格式：父元素.children
//拿到所有子元素
let Eler = headerEle.children;
console.log(Eler);

/**childNodes 字元素节点

获取子节点（元素，文本，注释）
书写格式：父元素.childNodes
*/
//拿到所有子元素节点和文本节点（空格是文本节点）
let Eler2 = headerEle.childNodes;
console.log(Eler2);

firstChild 会拿到第一个文本节点
let Eler3=headerEle.firstChild;
console.log(Eler3)
lastChild会拿到最后一个文本节点
let Eler4=headerEle.lastChild;
console.log(Eler4)

firstElementChild第一个元素的子节点
let Eler5=headerEle.firstElementChild;
console.log(Eler5)
lastElementChild 最后一个元素的子节点
let Eler6=headerEle.lastElementChild;
console.log(Eler6)

/**

添加或替换元素内容
元素节点.innerText=“添加的内容”
元素节点.divEler.innerHTML=“添加的内容”
innerText和innerHTML的区别
innerText不可以识别标签，即会把标签以字符串的形式添加到元素内容中展示
innerHTML可以识别字符串中的标签，并转换为子元素
注：若原标签有内容，以上二个标签均为替换
*/
let divEler=document.getElementsByTagName(“div”)[0];
console.log(divEler);
//给div中添加内容（不会转换为子元素）
// divEler.innerText=“1234”;
//给div 中添加内容（会转换为子元素）
divEler.innerHTML=“1234”;
【添加元素节点】
步骤：
1，创建新节点
(1)创建元素节点
(2)创建文本节点
(3)把文本节点添加到元素节点中
2，把新创建的节点添加到页面
(1)获取被添加的元素节点
(2)把新元素节点添加为其子节点
创建元素的节点 .ceeateElement()
//创建元素节点
let pEler=document.createElement(“p”);
创建文本节点.ceeateTextNode()
//创建文本节点
let pText=document.createTextNode(“f70”)
移动元素节点.appendChild
pEler.appendChild(pText);
获取表单内元素的值.value
let e=document.querySelector(“textarer”);
console.log(e.value);
删除节点
节点.remove();
注：如果节点有子元素或后代元素会一同删除
let spanEler=document.querySelectorAll(“span”)[1]
function del(){
//删除子节点
// spanEler.remove();
//删除子节点父节点
spanEler.parentNode.remove();
}
克隆节点
书写格式：克隆节点.cloneNode(布尔值）
布尔值：
fales:浅克隆，只复制克隆节点，（即没有内容的标签）
true:深克隆，即会把子节点一同复制
例如：
深克隆：spanEler.cloneNode(true);
浅克隆： spanEler.cloneNode(fales);
有问题代码
let spanEler=document.querySelectorAll(“span”)[0];
let pEler=document.querySelectorAll(“p”)[0];
let seEler=document.querySelectorAll(“section”)[0];
function kelong(){
let newNode=spanEler.cloneNode(true);
seEler.appendChild(newNode);
}
替换
步骤：
获取被替换的父元素
父元素.replaceChild(新节点，旧节点）
注：旧节点为被替换的元素
元素也是被替换的父元素
let seEler = document.querySelectorAll(“section”)[0];
console.log(seEler)
let pEler = document.querySelectorAll(“p”)[1];
console.log(pEler)
//创建新节点
let spanEler = document.createComment(“span”);
console.log(spanEler)
let spEler = document.createTextNode(“1234”);
spanEler.appendChild(spEler);
//获取替换节点父元素
function tihuan(){
seEler.replaceChild(spanEler, pEler);
}

.clientWhite获取元素的宽
.clientHight获取元素的高
注释节点
let zhushiEler=document.createComment(注释节点);
let spanEler=document.getElementsByTagName(“span”)[0];
spanEler.insertBefore(spanEler,zhushiEler);
获取属性节点的值
书写格式：元素节点.getAttribute（属性名）
let divEler = document.getElementsByTagName(“div”)[0];
let clasviue = divEler.getAttribute(“class”)
console.log(clasviue); //box
由于class是关键字，会冲突因此获取类名用className
console.log(divEler.className); //box
console.log(divEler.class) //un
设置属性节点的值（新增，修改）
书写格式：元素节点.setAttribute（属性名,属性值）
//html代码

f70

//获取元素节点 let divEler = document.getElementsByTagName("div")[0]; //修改HTML属性节点的值 divEler.setAttribute("name", "f71") 删除属性节点的值书写格式：元素节点.removeAttribute(属性名) //html代码

f70

//删除HTML属性节点的值 divEler.removeAttribute("name") 查找属性节点 //html代码

f70

//查找HTML中是否有class属性 let f70 = divEler.hasAttribute("class"); console.log(f70); 【拓展】【设置属性的快捷方式】获取节点的类名节点名.className console.log(divEle.className); 给label节点设置for值 //HTML的laber代码 123 //获取laber节点 let labelEle = document.querySelector("label"); //给laber添加for值 labelEle.htmlFor = "F70"; 修改input的类型 //HTML文本输入框 //获取input节点 let inputEle = document.querySelector("input"); //通过type修改input类型为多选框 inputEle.type = "checkbox"; 自定义属性节点获取自定义属性节点的值书写格式：节点名.dataset.自定义名 //html代码 //获取input节点 let inputEler=document.querySelector("input"); //获取自定义属性节点 let info = inputEle.dataset.abc; console.log(info);//输出0987属性值更改自定义属性节点的值 inputEle.dataset.abc = "F70"; 获取节点的class值（多个值以类数组方式存储） * 获取节点的class值（多个值以类数组方式存储） * 获取某个值：节点名.classList[0] * 书写格式：节点名.classList * 保留愿节点的class值，在其基础上添加新的类名 * 书写格式：节点名.classList.add(属性值) HTML代码

//获取section节点 let secEler=document.querySelector("section"); //获取节点class值：box1，box2,string console.log(secEler.className,typeof secEler.className); //在其基础上添加新的类名 secEler.classList.add("box3"); //获取节点class值：box1，box2，box3 console.log(secEler.className) //获取某个值：获取到box2 console.log(secEler.classList[1]); //查找属性值（类）查找是否有box2 secEler.classList.contains("box2"); //有查找的属性值返回true，没有返回false console.log(secEler.classList.contains("box2"));//返回true 切换（添加或者删除） * 如果节点有小括号class的值就删除，没有就添加。 * 注：该方法返回布尔值，添加true，删除false html代码 guoguo 获取span节点 let spanEler=document.querySelector("span"); 如果html中有class属性值就删除class值 spanEler.classList.toggle("guo") 如果html中没有class属性值就添加class值 spanEler.classList.toggle("guo") 删除class值 //HTML代码 guoguo //获取span节点 let spanEler=document.querySelector("span"); //删除class值，class还在 spanEler.classList.remove("guo") 获取元素的上一个或下一个 //HTML代码 1 2 3 //获取一个span节点 let spanEler = document.getElementsByTagName("span")[1]; //下一个（通过span节点获取下一个节点） console.log(spanEler.nextElementSibling) //上一个（通过span节点获取上一个节点） console.log(spanEler.previousElementSibling)