DOM
document object modle 文档对象模型。把整个HTML文档看成一棵树，树的每一个节点都是一个对象，对象中包含对象的属性信息、文本信息、关系信息，其中节点分为：
-
元素节点：HTML标签
-
文本节点：标签中的文字部分
-
属性节点：标签的属性
给前端web加动作的步骤
-
找到相应的标签
-
给标签绑定相应的事件
-
操作对应的标签
查找标签
直接查找
// 通过id获取单个标签 var div1 = document.getElementById(标签id名); // 通过标签名获得标签数组 var arr1 = document.getElementsByTagName(标签名); arr1[0] // 获取数组中第一个元素 // 通过类名获得标签组 var arr2 = document.getElementsByClassName(标签类名); arr2[0] // 获取数组中第一个元素
实例
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM</title> 6 <style> 7 div.di0{width:100px;height:100px;background-color: gray} 8 a.a0{display:inline-block;width:100px;height:100px; background-color: pink} 9 10 </style> 11 </head> 12 <body> 13 <div id="div1" class="di0" name="div1"> 14 OKOKOOK 15 <a href="https://www.jjzz.com" id="a1" class="a0" name="a1">jjzz官网</a> 16 </div> 17 <div id="div2" class="di0" name="div2">we are the champions</div> 18 <a href="http://www.haha.com" id="2" class="a0" name="a2" >哈哈网</a> 19 </body> 20 </html> 21 22 # 方式1 23 var arr1 = document.getElementById('div1'); 24 console.log(a1); 25 // 输出 26 <div id="div1" class="di0" name="div1"> 27 OKOKOOK 28 <a href="https://www.jjzz.com" id="a1" class="a0" name="a1">jjzz官网</a> 29 </div> 30 31 # 方式2 32 var arr2 = document.getElementsByClassName('a0'); 33 34 # 方式3 35 var arr3 = document.getElementsByTagName('div');
间接查找
节点与节点之间并不是相互孤立的，它们存在的关系有：父节点、兄弟节点、子节点、所有子节点
| 兄弟节点 | 子节点 | 所有子节点 | |
|---|---|---|---|
| parentNode | nextSibling | firstChild | childNodes |
| nextElementSibling | firstElementChild | children | |
| previousSibling | lastChild | ||
| previousElementSibLing | lastElementChild |
获取父节点
# 以bing主页面为例
var arr1 = document.getElementById('hp_table');
p1 = arr1.parentNode(); // 获取父节点
获取儿子节点
# 沿用上例 // 获取所有儿子节点 p2 = arr1.children // 获取第一个儿子节点 p3 = p1.firstElementChild; // 获取第二个儿子的节点 p4 = p1.lastElementChild;
获取兄弟节点
p5 = arr1.nextElementSibling； //找下一个兄弟 返回一个对象 p6 = arr1.previousElementSibling; //找上一个兄弟 返回一个对象
操作标签
标签的创建
var obj = document.createElement('标签名') // a div ul li span
obj就是一个新创建出来的标签对象
var obj1 = document.createElement('a') // 创建一个新的a标签
标签的添加
父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后
父节点.insertBefore(要添加的节点,参考的儿子节点) //添加在父节点的某个儿子之前
var obj1 = document.createElement('div')；
var a1 = document.createElement('a');
obj1.appendChild(a1);
var a3 = document.createElement('div');
obj1.insertBefore(a3,a1);
标签的删除
父节点.removeChild(要删除的子节点)
子节点1.parentNode.removeChile(子节点2)
var a2 = document.createElement('a');
obj1.appendChild(a2);
obj1.removeChild(a2);
标签的替换
父节点.replaceChild(新标签,旧儿子)
var a4 = document.createElement('span');
obj1.replaceChild(a4,a1);
标签的复制
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。不带参数/带参数false：只复制节点本身，不复制子节点。 要复制的节点.cloneNode(true); //带参数true：既复制节点本身，也复制其所有的子节点。
标签的属性操作
// 获取节点属性
节点对象.getAttribute('属性名')
// 设置节点的属性值
节点对象.setAttribute('属性名','属性值')
// 删除节点属性
节点对象.removeAttribute('属性名')
节点的文本操作
节点对象.innerText = '只能写文字' // 只能添加文本内容 节点对象.innerHTML = '可以放标签' // 可以自动识别添加标签和文本内容
获取值操作
.value 适用于以下标签，用户输入或者选择类型的标签：input 、select 、textarea
1 <body> 2 <a href="" value = 'xxx' class = 'akjds' name ='sajkfk'>文本</a> 3 <input type="text" name="user" id="user"> 4 <select name="city" id="city"> 5 <option value="1" selected>北京</option> 6 <option value="2">上海</option> 7 <option value="3">天津</option> 8 </select> 9 <textarea name="" id="content" cols="30" rows="10"> 10 </textarea> 11 </body> 12 13 // 进行值操作，在网页的console界面 14 var a1 = document.getElementById('user'); 15 var a2 = document.getElementById('city'); 16 var a3 = document.getElementById('content'); 17 a2.value; // 1 18 a2.value = 2; 19 20 a1.value = '请输入用户名'； 21 a3.value = '请在次输出如评论'; 22 23 # 可以通过网页更改value的值，通过 .value获取这些值。
class类操作
可以让网页动起来了
1 className 获取所有样式类名(字符串) 2 3 # 首先获取标签对象 4 标签对象.classList.remove(cls) 删除指定类 5 classList.add(cls) 添加类 6 classList.contains(cls) 存在返回true，否则返回false 7 classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个 8 <head> 9 <meta charset="UTF-8"> 10 <title>class操作</title> 11 <style> 12 .odiv1{ 13 width: 100px; 14 height: 100px; 15 background-color: red; 16 } 17 .odiv2{ 18 background-color: yellow; 19 } 20 </style> 21 </head> 22 <body> 23 <div id='box' class = 'odiv1'></div> 24 <script> 25 box.onclick = function () { 26 if(this.classList.contains('odiv2')){ 27 this.classList.remove('odiv2') 28 }else{ 29 this.classList.add('odiv2') 30 } 31 } 32 </script> 33 </body>
【红绿灯】
1 <head> 2 <meta charset="UTF-8"> 3 <title>事件-红绿灯</title> 4 <style> 5 .fa{display: inline-block; padding: 5px;border-radius: 10px;border-color: darkgray;border-style: solid} 6 .div0{width:100px;height:100px;border-radius: 50px; 7 border-color: white;background-color: gray; 8 display: inline-block;margin: 0;} 9 .div2{background-color: green;} 10 .div1{background-color: red;} 11 .div3{background-color: yellow;} 12 </style> 13 </head> 14 <body> 15 <div class="fa"> 16 <div id="d0" class="div0 div1"></div> 17 <div id="d1" class="div0"></div> 18 <div id="d2" class="div0"></div> 19 </div> 20 21 <script> 22 23 function change() 24 { 25 var tem = document.getElementsByClassName('div0'); 26 if (tem[0].classList.contains('div1')) 27 { 28 tem[0].classList.remove('div1'); 29 tem[1].classList.add('div2'); 30 } 31 else if (tem[1].classList.contains('div2')) 32 { 33 tem[1].classList.remove('div2'); 34 tem[2].classList.add('div3'); 35 } 36 else if (tem[2].classList.contains('div3')) 37 { 38 tem[2].classList.remove('div3'); 39 tem[0].classList.add('div1'); 40 } 41 42 } 43 setInterval(change,1000); 44 45 </script> 46 </body>
指定CSS操作
obj.style.backgroundColor="red"
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin obj.style.width obj.style.left obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即使用驼峰体。如：
obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.style.fontFamily
事件
事件的三要素：
-
事件源，引发后续事件的html标签
-
事件，js定义的事件
-
事件驱动，DOM
常见事件
| 事件名 | 描述 | 事件名 | 描述 |
|---|---|---|---|
| onclick | 鼠标单机 | onkeyup | 按下键盘的一个按键并释放时触发 |
| ondbclick | 双击鼠标 | onchange | 文本内容或者下拉菜单的选项发生改变时 |
| onload | 加载网页事件 | onfocus | 获得焦点，表示文本框获得鼠标 |
| onunload | 关闭网页时 | onblur | 失去焦点，表示文本框等失去鼠标光标 |
| onsubmit | 表单提交事件 | onmouseover | 鼠标悬停，鼠标悬停在图片上时 |
| onreset | 重置表单 | onmouseout | 鼠标移出，鼠标移开图片时 |
| onresize | 窗口变化时 |
获取事件源
前文已经记录了
var div1 = document.getElementById("标签ID"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("标签名"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("类名"); //方式三：通过 类名 获得 标签数组，所以有s
绑定事件
方式一：直接绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//直接绑定
div1.onclick = function () {
alert("hello");
}
</script>
方式二：先单独定义函数，再绑定
注意绑定函数的时候是直接跟的函数名，而不是函数名()
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1"); //绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()，fn()指的是返回值。
//单独定义函数
function fn() {
alert("hello");
}
</script>
方式三：行内绑定
行内绑定使用的是函数名()，而不是函数名，因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。
<!--行内绑定-->
<div id="box1" onclick="fn()"></div> //行内绑定的是fn()
<script type="text/javascript">
function fn()
{
alert("hello");
}
</script>
事件驱动
【注意事项】
-
在js里写属性值时，要用引号；
-
在js里写属性名时，是
backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-，line-、backgroun-等在js中都写成驼峰
onload事件
当页面加载（文本和图片）完毕的时候，触发onload事件。
作用：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，就容易报错。这个时候，onload事件就能派上用场了，把使用元素的代码放在onload里，就能保证这段代码是最后执行。
【举例】
<script type="text/javascript">
window.onload = function ( ) {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
window.onresize = function () {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
onscroll事件
<body style=" 2000px;height: 2000px;">
<div style="height: 200px;background-color: red;"></div>
<div style="height: 200px;background-color: green;"></div>
<div style="height: 200px;background-color: yellow;"></div>
<div style="height: 200px;background-color: blue;"></div>
<div style="height: 200px;background-color: gray;"></div>
<div id = 'scroll' style=" 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
<p>
叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳
叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳
叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳
叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳 叽叽喳喳
</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
// 实施监听滚动事件
window.onscroll = function(){
console.log(1111);
console.log('上'+document.documentElement.scrollTop);
console.log('左'+document.documentElement.scrollLeft);
console.log('宽'+document.documentElement.scrollWidth);
console.log('高'+document.documentElement.scrollHeight);
};
var s = document.getElementById('scroll');
s.onscroll = function(){
// scrollHeight : 内容的高度+padding 不包含边框
console.log('上'+s.scrollTop);
console.log('左'+s.scrollLeft);
console.log('宽'+s.scrollWidth);
console.log('高'+s.scrollHeight);
}
}
</script>