点击刷新
1.JS的DOM是什么？
DOM 是 Document Object Model（文档对象模型）的缩写。
BOM 浏览器对象模型:
任意的文档都可以绘制成树状结构，在DOM 树上，每个元素都可与看做一个对象，每个对象都叫做一个节点(node)。
docunment就是一个对象，这个对象指代的是这个文档
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
2.DOM的用处
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
就是为了操作HTML中的元素，使得网页被下载到浏览器后改变网页内容成为可能。
通过这个 (BOM 浏览器对象模型) 对象模型，JavaScript 获得创建动态 HTML 的所有力量：
● JavaScript 能改变页面中的所有 HTML 元素
● JavaScript 能改变页面中的所有 HTML 属性
● JavaScript 能改变页面中的所有 CSS 样式
● JavaScript 能改变页面中的所有 CSS 样式
● JavaScript 能添加新的 HTML 元素和属性
● JavaScript 能对页面中所有已有的 HTML 事件作出反应
● JavaScript 能在页面中创建新的 HTML 事件
DOM ： Document Object Model ，文档对象模型
JavaScript 语法上提供的可以用于对网页文档进行标签查询、创建/修改/删除标签、操作标签属性、操作标签样式、操作标签内容的一系列函数！
3.查询DOM对象
网页文档对象的操作，首先通过代码查询标签对象—— DOM 对象
3.1 基础查询函数（常见DOM操作）
| 函数 | 描述 |
|---|---|
| document.getElementById(idVal) | 根据 id 属性值查询单个 DOM 对象 |
| document.getElementsByClassName(cVal) | 根据 class 属性查询多个 DOM 对象 |
| document.getElementsByTagName(tVal) | 根据标签名称查询多个 DOM 对象 |
| document.getElementsByName(nVal) | 根据 name 属性查询多个 DOM 对象 |
| document.querySelector(selector) | 根据 css选择器 查询第一个匹配的对象 |
| document.querySelectorAll(selector) | 根据 css选择器 查询多个匹配的对象 |
小示例如下：
下面的例子改变了 id=“demo” 的 “p“ 元素的内容：
<body>
<p id="demo">我是慕遥</p>
<script>
document.getElementById("demo").innerHTML = ( "我是小敬")
</script>
</body>
在上面的例子中，getElementById 是方法，而 innerHTML 是属性。
以上DOM操作示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="box">
<h3>自嘲 <small>--作者:丁元英</small></h3>
<p class="first content">本是后山人，偶作前堂客</p>
<p class="content">醉舞经阁半卷书，坐进说天阔</p>
<p class="content">大志戏功名，海斗量福祸</p>
<p class="last content">待到囊中羞涩时，怒指乾坤错</p>
</div>
<hr />
<form action="">
<div>
<label for="username">账号：</label>
<input type="text" name="username" id="username" />
</div>
<div>
<label for="userpass">密码：</label>
<input type="password" name="userpass" id="userpass" />
</div>
<div>
<button>提交表单</button>
</div>
</form>
<script>
// 1、学习获取标签的语法
var _box = document.getElementById("box")
console.log(_box, "box") // 唯一的 DOM对象
var _pClass = document.getElementsByClassName("content")
console.log(_pClass, "className") // 获取多个DOM对象
var _pTag = document.getElementsByTagName("input")
console.log(_pTag, "Tag Name") // 获取多个DOM对象
var _pName = document.getElementsByName("username")
console.log(_pName, "Name属性") // 获取多个DOM对象
// 现在开发中使用最频繁的函数---------------------
var _pCss = document.querySelector("#box .first")
console.log(_pCss, "css选择器") // 获取第一个匹配的
var _pCsses = document.querySelectorAll(".content")
console.log(_pCsses, "css选择器") // 获取多个匹配对象
// 2、建议封装获取对象的函数
function $(selector){
return document.querySelectorAll(selector)
}
// 获取class="last"的标签
console.log( $(".last"), "获取last标签" )
// 获取id="box"的标签
console.log( $("#box"), "获取id=box的标签" )
// 获取所有的p标签
console.log( $("p"), "获取所有的p标签" )
</script>
</body>
</html>
效果如下：
3.2 查询其他标签
| 函数 | 描述 |
|---|---|
| domObj.getElementById()/querySelecto()… | 查询某个标签中包含的标签对象 |
| domObj.parentElement | 获取父标签对象 |
| domObj.parentNode | 获取父节点对象 |
| domObj.children | 获取子标签对象 |
| domObj.childNodes | 获取子节点对象(包含文本节点) |
| domObj.previousElementSibling | 获取上一个兄弟标签节点 |
| domObj.previousSibling | 获取上一个节点(包含文本节点) |
| domObj.nextElementSibling | 获取下一个兄弟标签节点 |
| domObj.nextSibling | 获取下一个节点（包含文本节点） |
| document.forms | 查询网页中的所有表单 |
直接代码操作示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<h3>自嘲 <small>--作者:丁元英</small></h3>
<p class="first content">本是后山人，偶作前堂客</p>
<p class="content">醉舞经阁半卷书，坐进说天阔</p>
<p class="content">大志戏功名，海斗量福祸</p>
<p class="last content">待到囊中羞涩时，怒指乾坤错</p>
</div>
<p class="content">天道</p>
<hr>
<form action="">
<div>
<label for="username">账号：</label>
<input type="text" name="username" id="username">
</div>
<div>
<label for="userpass">密码:</label>
<input type="password" name="userpass" id="userpass">
</div>
<div>
<button>提交表单</button>
</div>
</form>
<script>
// 1、getElementById()
// getElementsByXXX()
// 不仅可以通过document调用，查询网页中包含的指定规则标签对象
// 可以通过标签对象如_box进行调用，查询_box内部包含的指定规则的对象
var _box = document.getElementById("box")
var _ps = _box.getElementsByClassName("content")
console.log(_box)
console.log(_ps)
//2.第二个<p class="content"><p>
var _p = document.querySelector("p:nth-of-type(2)")
console.log(_p)
// 3、查询父节点标签
console.log(_p.parentElement) // 父标签对象
console.log(_p.parentNode) // 父节点对象
// 4、查询子节点标签
console.log(_box.children) // 包含的所有子标签(这里忽略文本内容)
console.log(_box.childNodes) // 包含的所有子节点(包含文本子节点)
// 5、查询兄弟标签（前previous/后next）
console.log(_p, "当前节点")
console.log(_p.previousElementSibling) // 获取前一个标签节点
console.log(_p.previousSibling) // 获取前一个节点(文本节点)
console.log(_p.nextElementSibling) // 获取下一个标签节点
console.log(_p.nextSibling) // 获取下一个节点(文本节点)
// 6、为了方便操作网页中的特殊标签，如表单标签
// DOM树结构，支持直接查询的方式
console.log(document.forms) // 查询网页中的所有表单
</script>
</body>
</html>
效果如下：
3.3思考：备注：什么是标签？什么是节点？
JavaScript 中将网页文档中的标签进行解释后，得到标签对应的节点对象，包含节点属性： nodeType ，不同的节点属性值不同。
● 1：这是一个标签对象
● 2：这是一个属性对象
● 3：这是一个文本对象
JavaScript 语法中通过节点数（ DOM树 ）间接的表示网页中的标签结构，如图：
3.4标签对象操作
DOM 操作中我们已经可以查询对应的节点：需要对节点进行增加、修改和删除的操作。
| 函数 | 描述 |
|---|---|
| document.createElement() | 创建标签节点 |
| document.createTextElement() | 创建文本节点 |
| document.appendChild() | 末尾追加一个子节点 |
| document.insertBefore() | 指定标签前面增加一个节点 |
| document.removeElement() | 删除一个指定节点 |
| document.replaceElement() | 替换/修改一个指定节点 |
代码操作：可以通过固定的语法，进行标签的创建、添加、删除和替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<h3>琵琶行 <small>作者：白居易</small></h3>
<p>浔阳江头夜送客，枫叶荻花秋瑟瑟</p>
<p id="px">千呼万唤始出来，犹抱琵琶半遮面</p>
</div>
<script>
// 获取box div
var _box = document.querySelector("#box")
// 1、创建 p 段落 节点
var _p = document.createElement("p") // <p></p>
var _t = document.createTextNode("嘈嘈切切错杂弹，大珠小珠落玉盘")
// 文本节点
_p.appendChild(_t) // <p>嘈嘈切切错杂弹，大珠小珠落玉盘</p>
// 添加到网页中
// appendChild() 当前标签内部子标签末尾追加一个子标签
_box.appendChild(_p)
// 2、创建一个 p 段落 节点
var _p2 = document.createElement("p")
_p2.innerText = "主人下马客在船，举酒欲饮无管弦"
var _px = document.querySelector("#box p:nth-of-type(2)")
console.log(_px)
// 将_p2节点，插入到_box中的子_px节点的前面
_box.insertBefore(_p2, _px)
// 3、删除一个节点: _p2
// var _px1 = document.querySelector("#box p:nth-of-type(1)")
// _box.removeChild(_px1) // 删除第一句
// 4、替换一个节点
var _px1 = document.querySelector("#box p:nth-of-type(1)")
_box.replaceChild(_p, _px1)
</script>
</body>
</html>
页面效果：
3.5 标签属性操作
| 函数 | 描述 |
|---|---|
| obj.id = val | 设置 id 属性 |
| obj.className = val | 设置 class 属性 |
| obj.setAttribute(属性名称, 变量 值) | 给标签对象设置 属性名称=“属性值” 的属性 |
| obj.getAttribute(属性名称) | 获取标签对象的 属性名称 对应的属性值 |
| obj.removeAttribute(属性名称) | 删除标签上 属性名称 对应的属性 |
代码操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 封装一个获取节点的函数
function $(selector) {
return document.querySelectorAll(selector)
}
// 1、操作属性
// 标签属性，包含id、class、其他属性
var _h3 = $("h3")[0]
// 操作id属性
_h3.id = "title"
// 操作class属性
var _p = $("p")
for (var i = 0; i < _p.length; i++) {
// 操作class属性：因为class是一个关键词，所以代码中使用className替代 class
_p[i].className = "content"
}
// 操作其他属性：setAttribute()/getAttribute()/removeAttribute()
var _p1 = $("p:nth-of-type(1)")[0]
// 操作name属性
_p1.setAttribute("name", "cnt")
console.log(_p1.getAttribute('name'), "获取属性")
_p1.removeAttribute('name')
</script>
</body>
</html>
3.6标签内容操作
JavaScript 中提供了几种可以直接操作标签内文本内容的方式
| 代码 | 描述 |
|---|---|
| obj.innerText | 获取或者设置文本内容 |
| obj.innerHTML | 获取或者设置标签文本内容 |
| obj.textContent | 获取或者设置文本内容，等价 innerText |
| obj.createTextNode() | 创建文本节点，标准 DOM 操作，一般不推荐使用 |
代码操作：
<script>
function $(selector) {
return document.querySelectorAll(selector)
}
var _title = $("#title")[0]
// _title.innerText = "李白的诗"
// _title.innerHTML = "<p>李白是个刺客<p>"
// _title.textContent = "李白经常打野"
// console.log(_title)
// var _t = document.createTextNode("李白的诗和远方")
// _title.appendChild(_t)
// console.log(_t)
</script>
更详细的DOM内容来自 W3C https://www.w3school.com.cn/js/js_htmldom.asp
© 著作权归作者所有
举报
发表评论
0/200
