目录
4.classList.add\remove\contains
2.firstElementChild 获取元素下一个元素下第一个子元素节点
3.lastElementChild 获取元素下一个元素下最后一个子元素节点
4.previousElementSibling 获取上一个兄弟元素节点（上一个哥哥节点）
5.nextElementSibling 获取下一个兄弟元素节点（下一个弟弟节点）
4.previousSibling 获取上一个兄弟节点（上一个哥哥节点）
5.nextSibling 获取下一个兄弟节点（下一个弟弟节点）
6.parentElement.removeChild 移除一个元素节点
2.getComputedStyle（"参1","参2"） 获取非行间样式
1.clientWidth clientHeight 获取内容宽高 + padding
2.offsetWidth offsetHeight 获取内容宽高+padding+border
3.offsetLeft offsetTop 获取元素偏移量
4.getBoundingClientRect 准确获取元素的尺寸和位置
一、元素操作属性
1.innerText 文本节点
//打印在box里的文本内容
console.log(box.innerText);
//在p里加入文本
p.innerText = "文本"2.innerHTML 内部的全部HTML结构
//打印在box里的文本内容（包含HTML标签）
console.log(box.innerHTML);
//在box里加入带标签文本
box.innerHTML = "<p>文本</p>"PS:innerText和innerHTML的区别：
innerText获取文本、插入文本（取值、赋值）
innerHTML获取HTML标签包括文本内容、可以用于插入HTML标签
3.className class覆盖
修改修改样式的标签.className="替换的class名"
var li = document.getElementsByTagName("li")[0];
li.className = "li2"4.classList.add\remove\contains
classList.add 在标签原有的class后面增加一个class
classList.remove 删除原有标签中指定的一个class
classList.contains 判断目标标签是否存在指定的一个class，返回true\false
document.querySelector("#btnSwitch").onclick = function(){
if(box.classList.contains("borderedBox")){
box.classList.remove("borderedBox")
}else{
box.classList.add("borderedBox")
}
}PS:className和classList的区别
className是直接覆盖原有的class
classList是可以追加class
二、获取元素节点、与节点、父元素
1.元素节点：
1.children 获取元素下所有元素节点
dom元素.children 返回一个 伪数组，包含该元素下所有的元素子节点
<div>
我是第一个文本节点
<!-- 我是一个注释 -->
<p>1</p>
我是再 p1 下面 p2 上面
<p>2</p>
我是最后一个文本节点
</div>
let children = div.children
console.log(children) 
2.firstElementChild 获取元素下一个元素下第一个子元素节点
dom元素.firstElementChild 返回该元素下第一个子元素节点
3.lastElementChild 获取元素下一个元素下最后一个子元素节点
dom元素.lastElementChild 返回该元素下最后一个子元素节点
4.previousElementSibling 获取上一个兄弟元素节点（上一个哥哥节点）
dom元素.previousElementSibling 返回改元素的上一个元素节点
5.nextElementSibling 获取下一个兄弟元素节点（下一个弟弟节点）
dom元素.nextElementSibling返回改元素的下一个元素节点
2.获取节点 （占据HTML位置的节点）
HTML所有DOM节点包括无标签的文本
1..childNodes 获取元素下所有子节点
dom元素.childNodes 返回一个伪数组，包含所有的节点（包含但不限于元素节点）
<div>
我是第一个文本节点
<!-- 我是一个注释 -->
<p>1</p>
我是再 p1 下面 p2 上面
<p>2</p>
我是最后一个文本节点
</div>
let childNodes = div.childNodes
console.log(childNodes)
输出DOM树所有节点包括无标签的节点
2.firstChild 获取元素下的第一个子节点
dom元素.firstChild 返回该元素下的第一个子节点（不一定是元素节点）
3.lastChild 获取元素下的最后一个子节点
dom元素.lastChild 返回该元素下的最后一个子节点（不一定是元素节点）
4.previousSibling 获取上一个兄弟节点（上一个哥哥节点）
dom元素.previousSibling 返回该元素的上一个节点（不一定是元素节点）
5.nextSibling 获取下一个兄弟节点（下一个弟弟节点）
dom元素.nextSibling 返回该元素的下一个节点（不一定是元素节点）
3.获取父元素
1.parentNode 获取父元素
dom元素.parentNode 返回该元素的父元素
三、操作DOM元素
1.createElement 创建一个 dom 元素
document.createElement('要创造的标签')
2.createTextNode 创建一个文本节点
document.createTextNode('要创造的文本节点')
3.appendChild 将标签加入父级标签里
parentElement.appendChild("childElement")
4. insertBefore 插入节点（最前）
dom元素.insertBefore(你要插入的元素, 你要插入到哪一个元素前面)
5.insertAfter 插入节点（最后）
dom元素.insertAfter(你要插入的元素, 你要插入到哪一个元素后面)
6.parentElement.removeChild 移除一个元素节点
parentElement.removeChild（移除的子元素）
7.remove() 元素自删
Element.remove() 删除自己
8.replaceChild() 替换一个元素
parentElement.replaceChild(要替换进入的元素， 把原先的哪一个元素替换掉)
9.cloneNode 克隆一个节点
domElement.cloneNode() 可以填写一个参数，参数可以写可以不写
参数不写默认是 false
参数是 false，表示只科隆自己，不克隆子元素
参数是 true，连带所有后代元素都克隆了
返回值： 就是一个被克隆好的 dom 元素
四、获取元素样式
1.style 可以获取和设置元素的行间样式
设置
div.style.display = "none"获取(只能获取到行内样式)
div {
width: 100px;
height: 100px;
background-color: pink;
}
<div style="color=red">文本</div>
console.log(div.style.color);//red
console.log(div.style. backgroundColor);
//获取不到：因为 background-color不是行内样式2.getComputedStyle（"参1","参2"） 获取非行间样式
window.getComputedStyle(你要获取的dom元素).你要获取的样式属性
参数有两个，第二个可以写可以不写，默认是 null（表示一个正常元素）
只写一个参数（表示一个正常元素）
div {
width: 100px;
height: 100px;
background-color: pink;
}
div::before {
content: '你好';
display: block;
width: 50px;
height: 50px;
background-color: skyblue;
}
console.log(window.getComputedStyle(div). backgroundColor);//pink如果没有设置获取的样式属性则会将所有属性输出
console.log(window.getComputedStyle(div));
//会输出一大堆样式 包括没有设置的样式第二个参数可以写 'after' || 'before'，表示我要获取伪元素的样式
div {
width: 100px;
height: 100px;
background-color: pink;
}
div::before {
content: '你好';
display: block;
width: 50px;
height: 50px;
background-color: skyblue;
}
console.log(window.getComputedStyle(div，after). backgroundColor);//skyblue五、获取元素尺寸
1.clientWidth clientHeight 获取内容宽高 + padding
Element.clientWidth
Element.clientHeight
2.offsetWidth offsetHeight 获取内容宽高+padding+border
Element.offsetWidth
Element.offsetHeight
3.offsetLeft offsetTop 获取元素偏移量
Element.offsetLeft
Element.offsetTop
1.无定位时：获取元素边框外侧到页面内侧的距离
2.有定位的时候：获取元素边框外侧到定位父级边框内侧的距离
4.getBoundingClientRect 准确获取元素的尺寸和位置
style>
*{
padding: 0;
margin: 0;
}
#box{
/* border: 10px solid black; */
width: 150px;
height: 150px;
background-color: beige;
/* left: 10px; */
position: relative;
}
#box1{
position: absolute;
width: 50px;
height: 50px;
background-color:aquamarine;
margin-left: 10px;
}
<div id="box"><div id="box1"></div></div>
//获取元素自身宽度
console.log(box1.getBoundingClientRect().width);
//获取元素自身高度
console.log(box1.getBoundingClientRect().height);
//获取元素自身左边到视窗左边的距离
console.log(box1.getBoundingClientRect().x);
//获取元素自身右边到视窗右边的距离
console.log(box1.getBoundingClientRect().y);
//获取元素自身上边到视窗上边的距离
console.log(box1.getBoundingClientRect().top);
//获取元素自身下边边到视窗上边的距离
console.log(box1.getBoundingClientRect().bottom);
//获取元素自身左边到视窗左边的距离 = getBoundingClientRect().y
console.log(box1.getBoundingClientRect().left);
//获取元素自身左边到视窗右边的距离 = getBoundingClientRect().x
console.log(box1.getBoundingClientRect().right);
扫一扫
2056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
