本文介绍了DOM和BOM的基本概念，DOM作为页面内容的对象模型，允许通过JavaScript进行操作。文章详细讲解了DOMTree、节点导航、获取元素的方法，如通过className和id，以及节点的属性如nodeType、nodeName。同时，讨论了document对象的重要性和元素的隐藏属性hidden。
目录
1_DOM和BOM简介
之前学习JavaScript的基本语法，属于ECMAScript，是JavaScript本身的语法部分；
window的全局对象，就包含了这些内容：
-
之前学习了JavaScript语法部分的Object、Array、Date等；
-
还有DOM、BOM部分；
DOM 文档对象模型（Document Object Model），将页面所有的内容表示为可以修改的对象；
BOM 浏览器对象模型（Browser Object Model），由浏览器提供的用于处理文档（document）之外的所有内容的其他对象； 比如navigator、location、history等对象；
1.1_DOM
浏览器会对编写的HTML、CSS进行渲染，又可能会通过JavaScript来对其进行操作：
-
浏览器将编写在HTML中的每个元素（Element）都抽象成了一个对象；
-
这些对象都可以通过JavaScript来对其进行访问，来操作页面；
-
这个抽象过程称之为 文档对象模型（Document Object Model）；
整个文档被抽象到 document 对象中：
-
比如document.documentElement对应的是html元素；
-
比如document.body对应的是body元素；
-
比如document.head对应的是head元素；
学习DOM，就是在学习如何通过avaScript对文档进行操作的；
1.2_DOM Tree的理解
一个页面不只是有html、head、body元素，也包括很多的子元素：
-
在html结构中，最终会形成一个树结构；
-
在抽象成DOM对象的时候，它们也会形成一个树结构，我们称之为DOM Tree；
1.3_DOM的学习顺序
-
DOM元素之间的关系
-
获取DOM元素
-
DOM节点的type、tag、content
-
DOM节点的attributes、properies
-
DOM节点的创建、插入、克隆、删除
-
DOM节点的样式、类
-
DOM元素/window的大小、滚动、坐标
1.4_DOM的继承关系图
DOM相当于是JavaScript和HTML、CSS之间的桥梁， 通过浏览器提供给我们的DOM API，可以对元素以及其中的内容做任何事情；
<script>
// 继承的概念：
// 继承有什么好处:
// 1.增加代码复用
// 2.继承是多态的前提
//父类
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
running() {
}
eating() {
}
}
//子类 通过extends关键字继承父类
class Student extends Person {
studying() {
}
}
class SmallStudent extends Student {
dwzry() {
}
}
class BigStudent extends Student {
xwjf() {
}
}
class Teacher extends Person {
}
var stu = new Student("xixi", 18)
stu.running()
stu.eating()
stu.studying()
</script>
1.5_document对象
Document节点表示的整个载入的网页，其实例是全局的document对象
-
对DOM的所有操作都是从 document 对象开始的；
-
它是DOM的 入口点，可以从document开始去访问任何节点元素；
对于最顶层的html、head、body元素，直接在document对象中获取：
-
html元素： = document.documentElement
-
body元素： = document.body
-
head元素： = document.head
-
文档声明： = document.doctype
2_节点的导航
获取到一个节点（Node）后，根据这个节点去获取其他的节点，称为节点之间的导航.
节点之间存在如下的关系：
-
父节点：parentNode
-
前兄弟节点：previousSibling
-
后兄弟节点：nextSibling
-
子节点：childNodes
- 第一个子节点：firstChild
- 第二个子节点：lastChild
<body>
<!-- 我是注释-->
我是文本
<div class="box">哈哈哈哈哈</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// var htmlEl = document.documentElement
// var bodyEl = document.body
// var headEl = document.head
// var doctype = document.doctype
// console.log(htmlEl, bodyEl, headEl, doctype)
// 1.获取节点的导航
var bodyEl = document.body
// 1.1.获取body所有的子节点
// console.log(bodyEl.childNodes)
// 1.2.获取body的第一个子节点
var bodyElFirstChild = bodyEl.firstChild
// 1.3.获取body中的注释
var bodyElCommentChild = bodyElFirstChild.nextSibling
console.log(bodyElCommentChild)
// 1.4.获取body的父节点
var bodyParent = bodyEl.parentNode
console.log(bodyParent)
</script>
</body>
3_表格元素的导航(用得少)
table 元素支持 (除了上面给出的，之外) 以下这些属性：
table.rows — tr 元素的集合；
table.caption/tHead/tFoot — 引用元素 caption，thead，tfoot；
table.tBodies — tbody 元素的集合；
thead，<tfoot>，<tbody> 元素提供了 rows 属性： tbody.rows — 表格内部 元素的集合；
<tr>：
-
tr.cells — 在给定 中的 和 单元格的集合；
-
tr.sectionRowIndex — 给定的 在封闭的 // 中的位置（索引）；
-
tr.rowIndex — 在整个表格中 的编号（包括表格的所有行）；
<td> 和 <th>： td.cellIndex — 在封闭的 中单元格的编号。
<body>
<!-- 高级元素: table/form -->
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
</thead>
<tbody>
<tr>
<td>why</td>
<td>18</td>
<td>1.88</td>
</tr>
<tr>
<td>kobe</td>
<td>30</td>
<td>1.98</td>
</tr>
</tbody>
</table>
<script>
var tableEl = document.body.firstElementChild
// 通过table元素获取内部的后代元素
// console.log(tableEl.tHead, tableEl.tBodies, tableEl.tFoot)
// console.log(tableEl.rows)
// 拿到一行元素
// var rowEl = tableEl.rows[2]
// console.log(rowEl.cells[0])
// console.log(rowEl.sectionRowIndex)
// console.log(rowEl.rowIndex)
</script>
</body>
4_获取元素的方法
用的方法比较多的是前两个
<body>
<div class="box">
<h2>我是标题</h2>
<div class="container">
<p>
我是段落, <span class="keyword">coderwhy</span> 哈哈哈哈
</p>
<p>
我也是段落, <span class="keyword">kobe</span> 呵呵呵呵额
</p>
<div class="article">
<h3 id="title">我是小标题</h3>
<p>
我是文章的内容
</p>
</div>
</div>
</div>
<script>
// 一. 通过导航获取
// 1.拿到body
var bodyEl = document.body
// 2.拿到box
var boxEl = bodyEl.firstElementChild
// 3.拿container
var containerEl = boxEl.children[1]
// 4.拿p
var pEl = containerEl.children[0]
// 5.拿到keyword
var spanEl = pEl.children[0]
spanEl.style.color = "red"
// 二. getElementBy*
// 1.通过className获取元素
var keywordEls = document.getElementsByClassName("keyword")
// // 修改第一个
keywordEls[0].style.color = "red"
// // 修改所有的
for (var i = 0; i < keywordEls.length; i++) {
keywordEls[i].style.color = "red"
}
// 2. 通过id获取元素
var titleEl = document.getElementById("title")
titleEl.style.color = "orange"
// 三.querySelector: 通过选择器查询
var keywordEl = document.querySelector(".keyword")
// keywordEls是对象, 可迭代的
// 可迭代对象: String/数组/节点的列表
var keywordEls = document.querySelectorAll(".keyword")
for (var el of keywordEls) {
el.style.color = "red"
}
console.log(keywordEls)
var titleEl = document.querySelector("#title")
titleEl.style.color = "orange"
</script>
</body>
5_节点的属性
5.1_nodeType
nodeType 属性提供了一种获取节点类型的方法；有一个数值型值（numeric value）
<body>
<!-- 我是注释 -->
我是文本
<div class="box">
<h2>我是标题</h2>
<p>我是内容</p>
</div>
<script>
// 1.获取三个节点
var bodyChildNodes = document.body.childNodes
var commentNode = bodyChildNodes[1]
var textNode = bodyChildNodes[2]
var divNode = bodyChildNodes[3]
for (var node of bodyChildNodes) {
if (node.nodeType === 8) {
} else if (node.nodeType === 3) {
} else if (node.nodeType === 1) {
}
}
console.log(commentNode.nodeType, textNode.nodeType, divNode.nodeType) // 8 3 1
console.log(Node.COMMENT_NODE) //8
</script>
</body>
5.2_nodeName、tagName
-
nodeName：获取node节点的名字；
-
为任意 Node 定义的：
-
对于元素，意义与 tagName 相同，所以使用哪一个都是可以的；
-
对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串；
-
-
tagName：获取元素的标签名词；仅适用于 Element 节点
console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName) //#comment #text DIV
console.log(commentNode.tagName, divNode.tagName) //undefined 'DIV'
5.3_innerHTML、textContent 、nodeValue
innerHTML ：将元素中的 HTML 获取为字符串形式；设置元素中的内容；
textContent ： 仅仅获取元素中的文本内容；
innerHTML和textContent的区别：
使用 innerHTML，将其“作为 HTML”插入，带有所有 HTML 标签。
使用 textContent，将其“作为文本”插入，所有符号（symbol）均按字面意义处理。
outerHTML： 包含了元素的完整 HTML； innerHTML 加上元素本身一样；
nodeValue或data： 用于获取非元素节点的文本内容
// data（nodeValue）针对非元素的节点获取数据
// innerHTML: 对应的html元素也会获取
// textContent: 只会获取文本内容
console.log(commentNode.data, textNode.data, divNode.data) //我是注释 我是文本 undefined
console.log(divNode.innerHTML) // <h2>我是标题</h2> <p>我是内容,</p>
console.log(divNode.textContent) // 我是标题 我是内容
console.log(divNode.outerHTML) //<div class="box"> <h2>我是标题</h2> <p>我是内容</p> </div>
5.4_其他属性
hidden：全局属性，可以用于设置元素隐藏
<body>
<button class="btn">切换</button>
<!-- hidden属性 -->
<div id="box" class="cba" title="aaa" style="color: red">
哈哈哈哈哈
</div>
<script>
// 1.获取元素
var boxEl = document.querySelector("#box")
var btnEl = document.querySelector(".btn")
// 2.监听btn的点击
btnEl.onclick = function() {
// 1.只是隐藏
// boxEl.hidden = true
// boxEl.style.display = "none"
// 2.切换
// boxEl.hidden = false
// if (boxEl.hidden === false) {
// boxEl.hidden = true
// } else {
// boxEl.hidden = false
// }
// 3.直接取反
boxEl.hidden = !boxEl.hidden
}
</script>
</body>
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
