js DOM
- DOM树
- 浏览器得到一个页面会做的事
1.解析
2.创建一棵DOM树
3.创建一棵CSSOM树
4.将DOM树和CSSOM树合并成一棵渲染树
5.计算页面布局（相对来说，有点慢）
6.描绘页面 =====>重绘
由于页面布局改变触发的计算布局叫做【回流】
JS跟DOM树的操作，比JS本身的操作慢很多，所以不宜在频繁触发的事件中涉及DOM树的操作
DOM树图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="a">
<p></p>
<p></p>
</div>
</body>
</html>
- offset属性
| 属性名 | 功能 | 参数 |
|---|---|---|
| offsetTop | 返回距离上级盒子（最近的带有定位）上边的位置 | 无 |
| offsetLeft | 返回距离上级盒子（最近的带有定位）左边的位置 | 无 |
| offsetWidth | 包含border外边缘以内的所有内容的宽度 | 无 |
| offsetHeight | 包含border外边缘以内的所有内容的高度 | 无 |
- 节点属性
| 属性名 | 功能 | 参数 |
|---|---|---|
| nodeType | 返回节点类型 | 无 |
| nodeName | 返回名称 | 无 |
| nodeValue | 返回值 | 无 |
- getElement 从页面取得元素节点
- 通过id
var dom节点=document.getElementById(‘id名’)
只找到一个元素，返回了一个对象，这个对象代表了页面中的一个节点
我们称之为DOM节点
- 通过标签名
var dom节点们=document.getElementsByTagName(‘标签名’)
返回值是伪数组，数组的每一个元素都是一个DOM节点
==dom节点.getElementsByTagName(‘标签名’)==在dom节点下获取指定标签名的元素
- 通过类名
var dom节点们=document.getElementsByClassName(‘类名’)
返回值是伪数组，数组的每一个元素都是一个DOM节点
- 通过name属性
var dom节点们=document.getElementsByName(‘name名’)
返回值是伪数组，数组的每一个元素都是一个DOM节点
- 通过css的选择器（一个）
var dom节点=document.querySelector（选择器）
返回符合选择器的第一个元素
选择器例如 div #a .class a:nth-child
- 通过css的选择器（所有）
var dom节点=document.querySelectorAll（选择器）
返回一个伪数组，取得符合选择器的所有元素
选择器例如 div #a .class a:nth-child
- attribute函数操作属性
| 函数名 | 功能 | 参数 |
|---|---|---|
| setAttribute（） | 修改属性、增加属性 | （'属性名','属性值'） |
| getAttribute（） | 获取属性 | ('属性名') |
| removeAttribute（） | 删除属性 | ('属性名') |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
}
.red {
background: red;
}
.black {
background: black;
}
</style>
</head>
<body>
<div id="a"></div>
<script>
//操作属性
var a = document.querySelector('div');
console.log(a.getAttribute('class'))//null
a.setAttribute('class', 'red');//增加class属性,属性值为red
a.setAttribute('class', 'black');//修改class属性，属性值为black
a.removeAttribute('class');//删除class属性
</script>
</body>
</html>
- 元素节点属性
| 属性名 | 功能 | 描述 |
|---|---|---|
| tagName | 返回标签名（只读） | 大写标签名 |
| innerHTML | 设置标签里的内容（读写） | 不包含标签名 |
| outerHTML | 设置标签里的内容(读写) | 包含标签名 |
| id | 设置id(读写) | id |
| className | 设置class名(读写) | calss名 |
| style | 设置内联样式(读写) | 如果样式为xxx-yy 的话，那么去掉横线，然后横线后面的单词首字母大写，如xxxYy |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
}
.red {
background: red;
}
.black {
background: black;
}
</style>
</head>
<body>
<div id="a"></div>
<script>
//操作属性
var a = document.querySelector('div');//找到页面上的第一个div
console.log(a.tagName)//DIV 输出标签名 注意，标签名为大写
a.innerHTML = '哈哈';//在标签里添加哈哈
a.outerHTML = '<p>haha</p>'//把<div id="a">哈哈</div>替换成<p>haha</p>
a = document.querySelector('p');//从新得到下页面上的p标签，因为页面上的div标签已经没有了，被替换为p标签了
a.id = 'a';//给p标签加id的属性，属性值为a
a.className = 'red';//给p标签加class 属性值为red
a.style.fontSize = '20px';//给p标签加内联样式font-size='20px'
//把横线去掉，size首字母大写
</script>
</body>
</html>
- 节点访问
- 访问父节点
dom节点.parentNode访问父节点
- 访问子节点（所有）
dom节点.childNodes访问子节点
返回值为伪数组
- 访问子元素节点（所有）
dom节点.children访问元素子节点
返回值为伪数组
- 访问前一个兄弟节点（可能是其他类型节点）
dom节点.previousSibling 访问前一个兄弟节点
- 访问前一个元素兄弟节点（元素）
dom节点.previousElementSibling访问前一个元素兄弟节点
- 访问后一个节点（可能是其他类型节点）
dom节点.nextSibling访问后一个节点
- 访问后一个元素节点（元素）
dom节点.nextElementSibling访问后一个元素节点
- 访问父节点的第一个节点（可能是其他类型节点）
dom节点.firstChild 访问父元素的第一个节点
- 访问父节点的第一个元素节点（元素）
dom节点.firstElementChild 访问父元素的第一个节点
- 访问父节点的最后一个节点（可能是其他类型节点）
dom节点.lastChild 访问父元素的最后一个节点
- 访问父节点的最后一个元素节点（元素）
dom节点.lastElementChild 访问父元素的最后一个节点
- 祖宗节点
dom节点. ownerDocument访问祖宗节点 ，也可以直接document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="a">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<script>
//访问父节点
var ul = document.querySelector('ul');//得到ul
console.log(ul.parentNode.tagName)//DIV
//访问子节点
console.log(ul.childNodes[1])//#text 代表的是文本节点
//返回值是伪数组，所以需要加索引
//访问元素子节点
console.log(ul.children[0]);//<li>1</li>
//返回值是伪数组，所以需要加索引
//访问前一个兄弟节点
var li2 = document.querySelector('ul>li:nth-child(2)');//得到第二个li
console.log(li2);//<li>2</li>
console.log(li2.previousSibling);//#text 代表的是文本节点
//访问前一个兄弟元素节点
console.log(li2.previousElementSibling);//<li>1</li>
//访问后一个兄弟节点
console.log(li2.nextSibling);//#text 代表的是文本节点
//访问后一个元素兄弟节点
console.log(li2.nextElementSibling);//<li>3</li>
//ul的第一个节点
console.log(ul.firstChild)//#text 代表的是文本节点
//ul的第一个元素节点
console.log(ul.firstElementChild.innerHTML)//1
//ul的最后一个节点
console.log(ul.lastChild)//#text 代表的是文本节点
//ul的最后一个元素节点
console.log(ul.lastElementChild.innerHTML)//8
//祖宗节点
console.log(ul.ownerDocument);//#document
</script>
</body>
</html>
- 节点操作
- 创建元素节点
document.createElement(‘标签名’)
- 追加元素节点
父节点.appendChild（dom节点）
参数：dom节点
- 插队元素节点
父节点.insertBefore（新节点,被插队节点）
在指定节点前插入一个节点
参数：dom节点
- 删除元素节点
父节点.removeChild（dom节点）
参数：dom节点
dom节点.remove() ie浏览器不兼容
- 复制元素节点
var 新dom节点=dom节点.cloneNode（） 没上树，默认不复制子节点
var 新dom节点=dom节点.cloneNode（true） 没上树，参数为true，会将子元素一起复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="a">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<script>
//节点操作
//创建元素节点
var li = document.createElement('li')//创建li节点
li.innerHTML = '10';//li里的内容为10
//追加元素节点
var ul = document.querySelector('ul');//得到ul
ul.appendChild(li);//将li追加到ul的最后面
//插队元素节点
var li1 = document.createElement('li')//创建li节点
li1.innerHTML = '我插队';//li里的内容为 我插队
ul.insertBefore(li1, ul.lastElementChild);//将li1插入到ul最后一个节点的前面
//删除元素节点
var li2 = document.querySelector('ul>li:nth-child(2)')//得到ul里的第二个li
ul.removeChild(li2)//删除ul的第二个li
//复制元素节点
var li3 = li1.cloneNode(true)//把li1复制给li3
ul.appendChild(li3)//把li3追加到ul的最后面
</script>
</body>
</html>
扫一扫
1152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
