DOM
Document Object Model --- 文档对象模型
顶级对象：document
document属于window的对象 即DOM内含于BOM
对html基本结构的操作
获取 body元素 及其所有内容
document.body
[本质：返回body对象]
[使用console.dir()查询对象的信息]
获取 html元素 及其所有内容
document.documentElement
[本质：返回html对象]
获取 head元素 及其所有内容
document.head
[本质：返回head对象]
获取、设置 title标签 网页标题内容
document.titledocument.title = str
获取元素
通过id名获取元素
document.getElementById('标签id名')
[括号中不需要填井号#]通过标签名获取元素
document.getElementsTagName('标签名')
[返回一个数组 所以需要调用时 需要以访问数组下标的方式进行]
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var arr = document.getElementsByTagName('button')
arr[1].style.backgroundColor = 'red'
</script>
返回结果图示
通过类名获取元素
document.getElementsByClassName("类名")
[同返回数组]通过name属性的值获取元素
document.getElementsByName("name属性的值")
[同返回数组]
5. 通过css选择器获取第一个元素
documen.querySelector(css选择器)
[只返回匹配的第一个元素]
6. 通过css选择器获取所有匹配元素
documen.querySelectorAll(css选择器)
[同返回数组]
7. 通过 关系 获取相应元素
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script>
var a = document.querySelector('ul')
// 获取所有子元素
// 父.chilren
console.log(a.children); // 以数组的形式 返回父元素的所有子元素 不包含内容
// 获取第一个子元素
// 父.firstElementChild
console.log(a.firstElementChild); // <li>1</li> 返回父元素的第一个子元素及其内容
console.log(typeof a.firstElementChild); // Object 本质返回对象
// 获取最后一个子元素
// 父.lastElementChild
console.log(a.lastElementChild); // <li>5</li> 返回父元素的最后一个子元素及其内容
console.log(typeof a.lastElementChild); // Object 本质返回对象
// 获取上一个兄弟元素
// 兄弟.previousElementSibling
console.log(a.lastElementChild.previousElementSibling); // <li>4</li> 返回指定同级元素的上一个兄弟元素及其内容
console.log(typeof a.lastElementChild.previousElementSibling); // Object 本质返回对象
// 获取下一个兄弟元素
// 兄弟.nextElementSibling
console.log(a.firstElementChild.nextElementSibling); // <li>2</li> 返回指定同级元素的下一个兄弟元素及其内容
console.log(typeof a.firstElementChild.nextElementSibling); // Object 本质返回对象
// 获取父元素
// 子.parentElement
console.log(a.parentElement); // 返回父元素body及其内容
console.log(typeof a.parentElement); // Object 本质返回对象
</script>
内容操作
// 获取、设置元素中的文本内容
<style>
div {
height: 100px;
width: 100px;
background-color: purple;
}
p {
background-color: yellow;
}
</style>
<body>
<div>
<p>文本内容</p>
</div>
</body>
<script>
// 获取元素的文本内容
// 标签.innerText
console.log(document.querySelector('p').innerText); // 文本内容
// 设置元素的文本内容
// 标签.innerText = 'str'
// 该方法会覆盖标签内原有的文本内容
document.querySelector('p').innerText = '覆盖原有文本'
</script>
设置文本内容-运行结果图示
// 获取、设置元素的子标签及其所有内容
<style>
div {
height: 100px;
width: 100px;
background-color: purple;
}
p {
background-color: yellow;
}
</style>
<body>
<div>
<p>文本内容</p>
</div>
</body>
<script>
// 获取元素的子标签及其所有内容
console.log(document.querySelector('div').innerHTML); // <p>文本内容</p>
// 设置元素的子标签及其所有内容
document.querySelector('div').innerHTML = '<b>原p标签及其内容被覆盖</b>'
</script>
如何避免使用inner添加内容而不被覆盖：
inner += 内容
设置元素的子标签及其所有内容-运行结果图示
属性操作
// 设置、添加属性
// 标签.setAttribute('属性名','属性值')
<body>
<table>
<tr>
<td>Demo</td>
</tr>
</table>
</body>
<script>
document.querySelector('table').setAttribute('border', 10)
</script>
// 注意分清 属性 与 样式 的区别
运行结果图示
// 获取属性值
// 标签.getAttribute('属性名')
<body>
<table border=10>
<tr>
<td>Demo</td>
</tr>
</table>
</body>
<script>
console.log(document.querySelector('table').getAttribute('border')) // 10
</script>
// 删除属性
// 标签.removeAttribute('属性名')
<body>
<table border=10>
<tr>
<td>Demo</td>
</tr>
</table>
</body>
<script>
document.querySelector('table').removeAttribute('border'))
</script>
运行结果图示
类名操作
// 获取类名
// 标签.className
<body>
<span class="demo"></span>
</body>
<script>
console.log(document.querySelector('span').className) // demo
</script>
// 设置类名
// 标签.className = '类名'
<body>
<span class="demo"></span>
</body>
<script>
document.querySelector('span').className = 'demo2'
</script>
运行结果图示
样式操作
获取样式
getComputedStyle(标签).样式
// 设置、添加样式
// 标签.style.属性 = '属性值'
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div></div>
</body>
<script>
document.querySelector('div').style.width = '200px'
</script>
// 该方法添加的样式为 行内样式 且不会覆盖原有的 其他样式
设置样式-运行结果图示
节点操作
DOM由html中的节点构成
标签、文本内容、注释 均是节点
案例：
<ul>222<span>abc</span><!-- 333 --></ul>
... ...
var ul=document.querySelector('ul')
// 获取所有子节点
console.log(ul.childNodes);
// 获取所有子标签
console.log(ul.children);
// 返回节点类型
// 节点.nodeType
console.log(ul.childNodes[0].nodeType); // 3 --- 文本节点 特定返回值
console.log(ul.childNodes[1].nodeType); // 1 --- 标签节点 特定返回值
console.log(ul.childNodes[2].nodeType); // 8 --- 注释节点 特定返回值
// 返回节点名称
// 节点.nodeName
console.log(ul.childNodes[0].nodeName); // #text --- 文本节点名称 特定返回 #text
console.log(ul.childNodes[1].nodeName); // SPAN --- 标签节点名称 特定返回 大写标签名
console.log(ul.childNodes[2].nodeName); // 8 --- 注释节点 特定返回 #comment
// 返回节点的值
// 节点.nodeValue
console.log(ul.childNodes[0].nodeValue); // 222 --- 返回文本节点的内容
console.log(ul.childNodes[1].nodeValue); // null --- 元素节点没有值 注意与value区分
console.log(ul.childNodes[2].nodeValue); // 333 --- 返回注释节点的内容
childNode与children的输出-图示
案例：
<body>
<p></p>
</body>
// 创建标签
// document.creatElement('标签名')
var demo = document.createElement('div')
var demo2 = document.createElement('span')
// 创建≠在html中创建 单纯创建 未添加入html中时 无意义
// 将新标签赋值给变量demo 方便接下来的操作
// 在 父元素 的 末尾 添加一个子节点
// 父元素.appendChild(子节点)
document.body.appendChild(demo)
在父元素的末尾添加子节点-运行结果图示
// 在 指定子节点 的 前面 添加一个子节点
// 父元素.insertBrfore(新结点,原有子节点)
document.body.insertBefore(demo2, document.querySelector('p'))
在子节点前添加节点-运行结果图示
// 替换同级节点
// 父元素.replaceChild(新节点,被替换的旧节点)
document.body.replaceChild(demo3, demo2)
替换同级节点-运行结果图示
// 删除节点
// 父元素.removeChild(子节点)
document.body.removeChild(demo3 demo)
// 使用空格隔开可同时删除多个节点
删除节点-运行结果图示
<p>abc</p>
...
// 复制节点
// 节点.cloneNode(boolean)
var a = document.querySelector('p').cloneNode(true) //深复制 复制标签及其内容
console.log(a); // <p>abc</p>
var b = document.querySelector('p').cloneNode(false) //浅复制 只复制标签
console.log(b); // <p></p>
获取标签定位位置 及 参考系
<body>
<p style="position: absolute;left: 20px;top: 50px;">abc</p>
</body>
<script>
// 获取标签的定位位置
// 相对参考系位置 参考系为页面即相对页面定位位置
// 获取左定位
// 标签.offsetLeft
console.log(document.querySelector('p').offsetLeft); // 20
// 获取顶部定位
// 标签.offsetRight
console.log(document.querySelector('p').offsetTop); // 50
// 获取定位参考的父元素
// 标签.offsetParent
console.log(document.querySelector('p').offsetParent); // <body>...</body>
</script>
获取标签宽高
<style>
p {
width: 100px;
height: 100px;
border: 50px solid black;
margin: 10px;
padding: 1px;
}
</style>
<body>
<p>abc</p>
</body>
<script>
// 获取标签的宽高
// 获取宽度
// 标签.offsetWidth
console.log(document.querySelector('p').offsetWidth); // 202
// 该宽度包含了边框宽 但不包含外边距
// 标签.clientWidth
console.log(document.querySelector('p').clientWidth); // 102
// 该宽度只包含内容和内填充宽
//获取高度
// 标签.offsetHeight
console.log(document.querySelector('p').offsetHeight); // 202
// 该宽度包含了边框高 但不包含外边距
// 标签.clientHeight
console.log(document.querySelector('p').clientHeight); // 102
// 该宽度只包含内容和内填充高
</script>
// offset系列 当对象为display：none时 无法获取到属性
// 解决方案：先深复制 隐藏时提取复制对象的属性
获取浏览器滚动的距离
Y轴向下滚动距离
-
document.documentElement.scrollTop
[当前文档有 文档声明doctype时才能 使用] -
document.body.scrollTop
[当前文档 没有 文档声明doctype时使用]
兼容写法
documen.documentElement.scrollTop || document.body.scrollTop
X轴向右滚动距离
document.documentElement.scrollLeft-
document.body.scrollLeft
[语法同上]
短路运算
// ||运算符
案例：
var a
a = 1 || 2
console.log(a); // 1 左为true 将左赋值给a
a = 1 || 0
console.log(a); // 1 同上
a = 0 || 2
console.log(a); // 2 左为0 即false 无论右值为什么 执行右 将右赋值给a
a = false || 0
console.log(a); // 0 同上
// &&运算符
案例：
var a
a = 1 && 2
console.log(a); // 2 左为true 执行右 将右赋值给a
a = 1 && 0
console.log(a); // 0 同上
a = 0 && 2
console.log(a); // 0 左为false &&运算符提前结束 将左赋值给a 不在执行右
a = false && 0
console.log(a); // false 同上
