JS中DOM和BOM
DOM
DOM(文档对象模型)是一个跨平台和语言独立的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在网页浏览器中,DOM 通常表示 HTML 或 XML 文档的对象模型。DOM 将网页内容视为节点树,其中每个节点都是文档中的对象,例如元素、属性、文本等。
以下是 DOM 的一些关键点:
-
文档:在 Web 浏览器中,文档通常是指网页,即 HTML 或 XML 文件。
-
对象模型:对象模型是将文档内容表示为对象集合的一种方式,这些对象可以由程序代码进行操作。
-
节点树:DOM 将文档结构表示为节点树,树中的每个节点代表文档的一部分。例如,HTML 文档中的每个元素、属性和文本都是节点。
-
编程接口:DOM 提供了一组方法(函数)和属性(变量),允许开发人员通过 JavaScript(或其他支持的语言)操作文档。
DOM中的节点类型
在 DOM(文档对象模型)中,节点类型是通过 nodeType
属性来区分的,每个节点类型都有一个对应的常量值。以下是一些主要的 DOM 节点类型及其对应的常量值:
-
元素节点(Element Node)
- 常量值:
Node.ELEMENT_NODE
- 整数值:1
- 示例:
<div>
,<p>
,<a>
- 常量值:
-
属性节点(Attribute Node)
- 常量值:
Node.ATTRIBUTE_NODE
- 整数值:2
- 示例:
href
in<a href="http://example.com">
- 常量值:
-
文本节点(Text Node)
- 常量值:
Node.TEXT_NODE
- 整数值:3
- 示例:文本内容 “Hello, World!” in
<p>Hello, World!</p>
- 常量值:
-
CDATA 节点(CDATASection Node)
- 常量值:
Node.CDATA_SECTION_NODE
- 整数值:4
- 示例:
<![CDATA[...]]>
in XML documents
- 常量值:
-
实体引用节点(EntityReference Node)
- 常量值:
Node.ENTITY_REFERENCE_NODE
- 整数值:5
- 注:在 HTML DOM 中不常用
- 常量值:
-
实体节点(Entity Node)
- 常量值:
Node.ENTITY_NODE
- 整数值:6
- 注:在 HTML DOM 中不常用
- 常量值:
-
处理指令节点(ProcessingInstruction Node)
- 常量值:
Node.PROCESSING_INSTRUCTION_NODE
- 整数值:7
- 示例:处理指令,常用于 XML
- 常量值:
-
注释节点(Comment Node)
- 常量值:
Node.COMMENT_NODE
- 整数值:8
- 示例:
<!-- This is a comment -->
- 常量值:
-
文档节点(Document Node)
- 常量值:
Node.DOCUMENT_NODE
- 整数值:9
- 示例:整个 HTML 或 XML 文档
- 常量值:
-
文档类型节点(DocumentType Node)
- 常量值:
Node.DOCUMENT_TYPE_NODE
- 整数值:10
- 示例:
<!DOCTYPE html>
- 常量值:
-
文档片段节点(DocumentFragment Node)
- 常量值:
Node.DOCUMENT_FRAGMENT_NODE
- 整数值:11
- 示例:轻量级的文档对象,可以包含多个元素而不影响文档结构
- 常量值:
-
符号节点(Notation Node)
- 常量值:
Node.NOTATION_NODE
- 整数值:12
- 注:在 HTML DOM 中不常用
- 常量值:
一、节点的创建、移除和克隆
1.如何改变元素节点中的内容
改变元素节点中的内容可以使用两个相关属性:innerHTML、innerText。innerHTML属性能以HTML形式设置节点中的内容;innerText系统属性只能以纯文本的形式设置节点中的内容。
2.创建节点
想要两步,第一步使用document.createElement()创建节点,第二步再上树,上树有两种情况,如果是在添加在最后,那就使用appendChild();如果不是,使用insertBefore。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="box"><p>我是原本的段落0</p><p>我是原本的段落1</p><p>我是原本的段落2</p></div><script>var oBox = document.getElementById('box');var oPs = oBox.getElementsByTagName('p');// 创建孤儿节点var oP = document.createElement('p');// 设置内部文字oP.innerText = '我是新来的';// 上树// oBox.appendChild(oP);oBox.insertBefore(oP, oPs[0]);</script>
</body></html>
创建出一个20行12列的表格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>td {width: 20px;height: 20px;border: 1px solid #000;}</style>
</head><body><table id="mytable"></table><script>// 请动态创建出一个20行12列的表格var mytable = document.getElementById('mytable');for (var i = 0; i < 20; i++) {// 创建了新的tr标签var tr = document.createElement('tr');for (var j = 0; j < 12; j++) {// 创建了新的td标签var td = document.createElement('td');// 让tr追加td标签tr.appendChild(td);}// 让mytable追加tr标签mytable.appendChild(tr);}</script>
</body></html>
创建9*9乘法表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>td {width: 120px;height: 30px;border: 1px solid #000;}</style>
</head><body><table id="mytable"></table><script>// 请创建九九乘法表var mytable = document.getElementById('mytable');for (var i = 1; i <= 9; i++) {// 创建了新的tr标签var tr = document.createElement('tr');for (var j = 1; j <= i; j++) {// 创建了新的td标签var td = document.createElement('td');// 设置td内部的文字td.innerText = i + '乘' + j + '等于' + (i * j);// 让tr追加td标签tr.appendChild(td);}// 让mytable追加tr标签mytable.appendChild(tr);}</script>
</body></html>
3.移动节点
如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数,这个节点将被移动。新父节点.appendChild(已经有父亲的节点);新父节点.insertBefore(已经有父亲的节点,标杆子节点);这意味着一个节点不能同时位于DOM树的两个位置。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box1"><p id="para">我是段落</p></div><div id="box2"><p>我是box2的原有p标签</p><p>我是box2的原有p标签</p><p>我是box2的原有p标签</p><p>我是box2的原有p标签</p></div><script>var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var para = document.getElementById('para');var ps_inbox2 = box2.getElementsByTagName('p');// box2.appendChild(para);box2.insertBefore(para, ps_inbox2[0]);</script>
</body>
</html>
4.删除节点
removeChild()方法从DOM中删除一个字节点 父节点.removeChild(要删除子节点);子节点不能主动删除自己,必须由父节点删除它。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"><p>我是p节点0</p><p>我是p节点1</p><p>我是p节点2</p></div><script>var box = document.getElementById('box');var the_first_p = box.getElementsByTagName('p')[0];box.removeChild(the_first_p);</script>
</body>
</html>
5.克隆节点
cloneNode()方法可以克隆节点,克隆出的节点上“孤儿节点”。
var 孤儿节点=老节点.cloneNode();
var 孤儿节点=老节点.cloneNode(true);
参数是一个布尔值,表示是否采用深度克隆;如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box1"><ul><li>牛奶</li><li>咖啡</li><li>可乐</li></ul></div><div id="box2"></div><script>var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var theul = box1.getElementsByTagName('ul')[0];// 克隆节点var new_ul = theul.cloneNode(true);box2.appendChild(new_ul);</script>
</body>
</html>
6.JS修改样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;border: 1px solid #000;}</style>
</head>
<body><div class="box" id="box">你好</div><script>var oBox = document.getElementById('box');// oBox.style.backgroundColor = 'rgb(100, 200, 123)';// oBox.style.backgroundColor = '#f80';// oBox.style.backgroundImage = 'url(https://www.imooc.com/static/img/index/logo-recommended.png)';// oBox.style.backgroundSize = 'contain';oBox.style.fontSize = '50px';</script>
</body>
</html>
7.nodeType常用属性值
8.访问元素节点
注意:如果有多个id相同的元素 只能找到第一个。 无论id多深,都能找到。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="box1">我是盒子1</div><div id="box2">我是盒子2</div><script>// 得到盒子1var box1 = document.getElementById('box1');// 得到盒子2var box2 = document.getElementById('box2');console.log(box1);console.log(box2);</script>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box1"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><div id="box2"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><script>// 先得到box1var box1 = document.getElementById('box1');// 得到box1中的p标签的数组var ps_inbox1 = box1.getElementsByTagName('p');console.log(ps_inbox1);</script>
</body>
</html>
9.延迟运行
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 给window对象添加onload事件监听。onload表示页面都加载完毕了。window.onload = function () {// 得到盒子1var box1 = document.getElementById('box1');// 得到盒子2var box2 = document.getElementById('box2');console.log(box1);console.log(box2);};</script>
</head><body><div id="box1">我是盒子1</div><div id="box2">我是盒子2</div>
</body></html>
10.querySelector()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"><p>我是段落</p><p class="spec para">我是段落</p><p>我是段落</p></div><script>var the_p = document.querySelector('#box p:nth-child(1)');console.log(the_p);</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul id="list1"><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><ul id="list2"><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><script>var lis_inlist1 = document.querySelectorAll('#list1 li');console.log(lis_inlist1);</script>
</body>
</html>
11.节点的关系
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"><p>我是段落A</p><p id="para">我是段落B</p><p>我是段落C</p></div><script>var box = document.getElementById('box');var para = document.getElementById('para');// 所有子节点console.log(box.childNodes);// 所有的元素子节点(IE9开始兼容)console.log(box.children);// 第一个子节点console.log(box.firstChild);console.log(box.firstChild.nodeType);//子节点的类型,它是一个数// 第一个元素子节点(IE9开始兼容)console.log(box.firstElementChild);// 最后一个子节点console.log(box.lastChild);console.log(box.lastChild.nodeType);//子节点的类型,它是一个数// 最后一个元素子节点(IE9开始兼容)console.log(box.lastElementChild);// 父节点console.log(para.parentNode);// 前一个兄弟节点console.log(para.previousSibling);// 前一个元素兄弟节点(IE9开始兼容)console.log(para.previousElementSibling);// 后一个兄弟节点console.log(para.nextSibling);// 后一个元素兄弟节点(IE9开始兼容)console.log(para.nextElementSibling);</script>
</body>
</html>
12.常见的节点关系函数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="box"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p id="fpara">我是段落fpara</p>我是文本<!-- 我是注释 --><p id="para">我是段落para<span>1</span><span>2</span><span>3</span></p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><script>var box = document.getElementById('box');var para = document.getElementById('para');var fpara = document.getElementById('fpara');// 封装一个函数,这个函数可以返回元素的所有子元素节点(兼容到IE6),类似children的功能function getChildren(node) {// 结果数组var children = [];// 遍历node这个节点的所有子节点,判断每一个子节点的nodeType属性是不是1// 如果是1,就推入结果数组for (var i = 0; i < node.childNodes.length; i++) {if (node.childNodes[i].nodeType == 1) {children.push(node.childNodes[i]);}}return children;}console.log(getChildren(box));console.log(getChildren(para));// 封装一个函数,这个函数可以返回元素的前一个元素兄弟节点(兼容到IE6),类似previousElementSibling的功能function getElementPrevSibling(node) {var o = node;// 使用while语句while (o.previousSibling != null) {if (o.previousSibling.nodeType == 1) {// 结束循环,找到了return o.previousSibling;}// 让o成为它的前一个节点,就有点“递归”的感觉o = o.previousSibling;}return null;}console.log(getElementPrevSibling(para));console.log(getElementPrevSibling(fpara));// 封装第三个函数,这个函数可以返回元素的所有元素兄弟节点function getAllElementSibling(node) {// 前面的元素兄弟节点var prevs = [];// 后面的元素兄弟节点var nexts = [];var o = node;// 遍历node的前面的节点while(o.previousSibling != null) {if(o.previousSibling.nodeType == 1){prevs.unshift(o.previousSibling);}o = o.previousSibling;}o = node;// 遍历node的后面的节点while(o.nextSibling != null) {if(o.nextSibling.nodeType == 1){nexts.push(o.nextSibling);}o = o.nextSibling;}// 将两个数组进行合并,然后返回return prevs.concat(nexts);}console.log(getAllElementSibling(para));</script>
</body></html>
二、DOM事件
事件监听、事件传播、事件对象、事件委托
1. 事件监听
1.常见的鼠标事件监听
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: #333;}</style>
</head>
<body><div id="box"></div><script>var oBox = document.getElementById('box');oBox.onclick = function() {console.log('我是onclick');};oBox.ondblclick = function() {console.log('我是ondblclick');};oBox.onmousedown = function() {console.log('我是onmousedown');};oBox.onmouseup = function() {console.log('我是onmouseup');};oBox.onmouseenter = function() {console.log('我是onmouseenter');};oBox.onmouseleave = function() {console.log('我是onmouseleave');};oBox.onmousemove = function() {console.log('我是onmousemove');};</script>
</body>
</html>
2.常见的键盘事件监听
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>姓名:<input type="text" id="nameField"><script>var nameField = document.getElementById('nameField');nameField.onkeydown = function () {console.log('我是onkeydown');};nameField.onkeypress = function() {console.log('我是onkeypress');}nameField.onkeyup = function() {console.log('我是onkeyup');}</script>
</body>
</html>
3.事件传播
事件传播是:先从外到内,再从内到外。
(1)onxxx写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1{width: 202px;height: 202px;border: 1px solid #000;padding: 50px;}#box2{width: 100px;height: 100px;border: 1px solid #000;padding: 50px;}#box3{width: 100px;height: 100px;border: 1px solid #000;}</style>
</head>
<body><div id="box1"><div id="box2"><div id="box3"></div></div></div><script>var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBox3 = document.getElementById('box3');oBox2.onclick = function () {console.log('我是box2的onclick');};oBox3.onclick = function () {console.log('我是box3的onclick');};oBox1.onclick = function () {console.log('我是box1的onclick');};</script>
</body>
</html>
(2) addEventListener()方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1{width: 202px;height: 202px;border: 1px solid #000;padding: 50px;}#box2{width: 100px;height: 100px;border: 1px solid #000;padding: 50px;}#box3{width: 100px;height: 100px;border: 1px solid #000;}</style>
</head>
<body><div id="box1"><div id="box2"><div id="box3"></div></div></div><script>var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBox3 = document.getElementById('box3');oBox2.addEventListener('click', function() {console.log('我是box2的冒泡阶段');}, false);oBox3.addEventListener('click', function() {console.log('我是box3的捕获阶段');}, true);oBox3.addEventListener('click', function() {console.log('我是box3的冒泡阶段');}, false);oBox3.onclick = function () {console.log('我是box3的onclick');};oBox1.addEventListener('click', function() {console.log('我是box1的冒泡阶段');}, false);oBox2.addEventListener('click', function() {console.log('我是box2的捕获阶段');}, true);oBox1.addEventListener('click', function() {console.log('我是box1的捕获阶段');}, true);oBox1.onclick = function () {console.log('我是box1的onclick');};oBox2.onclick = function () {console.log('我是box2的onclick');};</script>
</body>
</html>
4.事件对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#box{width: 200px;height: 200px;background-color: #333;margin: 100px;}body{height: 2000px;}#info{font-size: 30px;}</style>
</head>
<body><div id="box"></div><div id="info"></div><script>var oBox = document.getElementById('box');var oInfo = document.getElementById('info');oBox.onmousemove = function (e) {oInfo.innerHTML = 'offsetX/Y:' + e.offsetX + ',' + e.offsetY + '<br>'+ 'clientX/Y:' + e.clientX + ',' + e.clientY + '<br>'+ 'pageX/Y:' + e.pageX + ',' + e.pageY;};</script>
</body>
</html>