文档对象模型(Document Object Model,DOM)
DOM解释
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
1)document.getElementById 根据
ID
获取一个标签
<body> <div id="id_1"> </div> <script type="text/javascript"> var i = document.getElementById('id_1'); //查找指定的id i.innerText = '456'; //innerText修改指定的字符串 </script> </body>
2)document.getElementsByName 根据name属性获取标签集合
<body> <div name="name_1"> </div> <script type="text/javascript"> var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个 for (var item in i) { i[item].innerText = '456'; //innerText修改指定的字符串 }; </script> </body>
3)document.getElementsByClassName 根据
class
属性获取标签集合
4)document.getElementsByTagName 根据标签名获取标签集合
<body> <div> </div> <div> </div> <script type="text/javascript"> var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个 for (var item in i) { i[item].innerText = '456'; //innerText表示获取文本; 这整句是修改指定的字符串 }; </script> </body>
&
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title id="2">Title</title> </head> <body> <div> <h2>ok</h2> <form action="#" id="1" class="form1" name="form1"> <input type="text"> <input type="text"> <p>男:<input id=3 type="checkbox" name="男" value="nan"></p> <input type="submit"> </form> <h1>hao</h1> <input type="datetime-local"> </div> <script> //选择器 // var names = document.getElementsByClassName('form1'); // 根据class属性获取标签集合; 得到的是一个列表对象 // var names = document.getElementsByName('form1'); //根据name属性获取标签集合;得到的是一个列表对象 // var names = document.getElementsByTagName('FORM'); // 根据标签名获取集合;得到的是一个列表对象 var names = document.getElementById('1'); //根据ID获取一个标签,得到一个普通对象 // var names = document.querySelector('*'); //得到一个最先找到的对象,可以使用通配符* console.log(names); </script> </body> </html>
2、间接查找
标签包含文本:
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点
标签:
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div class="c1">asdf</div> <div class="c1" id="i1"> <p>asdf</p> <div name="n1"> <span>asd</span> </div> <div name="n1"> <a>1</a> <a>11111</a> </div> </div> <div class="c1">asdf</div> </div> <script> var i1 = document.getElementById('i1'); var p1_text = i1.parentNode; var p1 = i1.parentElement; var eles_node = p1_text.childNodes; // 含文本所有标签 for(var j=0;j<eles_node.length;j++){ var current_node = eles_node[j]; if(current_node.nodeType == 1){ console.log(eles_node[j]) } } var eles = p1.children; // 不含文本所有标签 for(var i=0;i<eles.length;i++){ console.log(eles[i]); } </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title id="2">Title</title> </head> <body> <div> <h2>ok</h2> <form action="#" id="1"> <input type="text"> <input type="text"> <p>男:<input id=3 type="checkbox" name="男" value="nan"></p> <input type="submit"> </form> <h1>hao</h1> </div> <script> // var names = document.getElementById('1').childElementCount; //查询子元素个数 //var names = document.getElementById('1').firstElementChild; //查询第一个元素 //var names = document.getElementById('1').getAttribute('action'); //获取该元素属性对应的值,不存在则为null //var names = document.getElementById('1').hasAttribute('name'); //查询元素是否设置了name属性 //var names = document.getElementById('1').lastElementChild; //查询最后一个元素,如果查询的元素内没有包含其它元素,则返回null //var names = document.getElementById('1').nextElementSibling; //查询下一个同级别元素 //var names = document.getElementById('1').previousElementSibling; //查询同级别的上一个元素 //var names = document.getElementById('1').querySelector('H1'); //在子元素里查询找到的第一个子元素标签 //var names = document.getElementById('1').querySelectorAll('INPUT'); //查询子元素内所有INPUT的标签,如果设置了ID则会将ID一并返回 //var names = document.getElementById('1').removeAttribute('action'); //移除存在的属性 //var names = document.getElementById('1').setAttribute('method','post'); //添加属性,并设置属性值 //var names = document.getElementById('1').tagName; //查询元素的标签名 //var names = document.getElementById('1').attributes; //查询元素所有属性 //var names = document.getElementById('1').baseURI; //查询元素所属url //var names = document.getElementById('1').id; //查询元素ID //var names = document.getElementById('2').innerText ="hhh"; //设置元素内文本属性 //var names = document.getElementById('1').innerHTML; //查询元素内的html及文本内容 var names = document.getElementById('1').innerText; //查询元素内文本属性 console.log(names); </script> </body> </html> 实例
二、操作
1、内容
innerText 获取文本
outerText
innerHTML 获取标签、文本信息
value 值
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element=document.getElementById("header"); element.innerHTML="New Header"; </script> </body> </html> innerHTML
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.etiantian.org">老男人<span>666</span> </a> <input id="txt" type="text" /> <select id="sel"> <option value="1">上海</option> <option value="2">北京</option> </select> <script> var obj = document.getElementsByTagName('a')[0]; // [a,] // alert(obj.innerText); 获取文本 // alert(obj.innerHTML) 获取标签、文本信息 // value var val = document.getElementById("txt").value; console.log(val); obj.innerText = '123'; obj.innerHTML = '<p>123</p>'; </script> </body> </html>
2、属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性
var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr);
修改属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title id="2">Title</title> </head> <body> <div> <h2>ok</h2> <form action="#" id="1" class="form1" name="form1"> <input id =5 type="text"> <input type="text"> <p>男:<input id=3 type="checkbox" name="男" value="nan"></p> <input type="submit"> </form> <h1 id="h1">hao</h1> <input type="datetime-local"> </div> <script> var names = document.getElementById('5'); //得到一个普通对象 names.id = 'newid'; //修改设置新标签属性ID names.className = "form"; //设置或修改标签css names.style.fontSize = '20px'; //设置标签样式 names.setAttribute('txt','mydefine'); //添加新属性 names.setAttribute('txt','mydefine'); //添加新属性,存在则忽略不报错 names.removeAttribute('txt'); //移除属性 names = names.getAttribute('id'); //获取属性值 console.log(names); </script> </body> </html> 修改属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" > <thead> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> </tbody> </table> <script> function CheckAll(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked = true; } } } function CancelAll(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked = false; } } } function ReverseCheck(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true; } } } } </script> </body> </html> Demo 实例
3、class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
4、标签操作
a、创建标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var tag = document.createElement('a') tag.innerText = "wupeiqi" tag.className = "c1" tag.href = "http://www.cnblogs.com/wupeiqi" // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>" 方式
b、操作标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 方式一 var obj = "<input type='text' />"; xxx.insertAdjacentHTML("beforeEnd",obj); xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二 var tag = document.createElement('a') xxx.appendChild(tag) xxx.insertBefore(tag,xxx[1]) 方式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div> <input type="text" /> <input type="button" value="添加" onclick="AddElement(this);" /> </div> <div style="position: relative;"> <ul id="commentList"> <li>alex</li> <li>eric</li> </ul> </div> </div> <script> function AddElement(ths) { // 获取输入的值 var val = ths.previousElementSibling.value; ths.previousElementSibling.value = ""; var commentList = document.getElementById('commentList'); //第一种形式,字符串方式 //var str = "<li>" + val + "</li>"; // 'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // beforeEnd内部最后 // beforeBegin 外部上边 //afterBegin 内部贴身 //afterEnd 外部贴墙 //commentList.insertAdjacentHTML("beforeEnd",str); //第二种方式,元素的方式 var tag = document.createElement('li'); tag.innerText = val; var temp = document.createElement('a'); temp.innerText = '百度'; temp.href = "http://etiantian.org"; tag.appendChild(temp); // commentList.appendChild(tag); commentList.insertBefore(tag,commentList.children[1]); } </script> </body> </html> 实例
5、样式操作
var obj = document.getElementById('i1') obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";
//Hello World!样式改变 <!DOCTYPE html> <html> <body> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> </body> </html>
// 点击后修改样式 <!DOCTYPE html> <html> <body> <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color='red'"> 点击这里!</button> </body> </html>
6、位置操作
总文档高度 document.documentElement.offsetHeight
当前文档占屏幕高度 document.documentElement.clientHeight
自身高度 tag.offsetHeight
距离上级定位高度 tag.offsetTop
父定位标签 tag.offsetParent
滚动高度 tag.scrollTop
clientHeight -> 可见区域:height + padding clientTop -> border高度 offsetHeight -> 可见区域:height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高:height + padding scrollTop -> 滚动高度 特别的: document.documentElement代指文档根节点
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin: 0;"> <div style="height: 20px;"></div> <div style="padding: 8px;margin: 20px;position: relative;"> <div id="i1" style="height:200px;border: 40px solid green;padding: 10px; margin: 90px;">asdf</div> </div> <script> var t1 = document.getElementById('i1'); console.log(t1.clientTop); // 边框高度 console.log(t1.clientHeight); // height + padding上 + padding下 console.log(t1.offsetTop); //可见内容距离顶部高度;单纯距离顶端高度,从边框外部开始计算 console.log(t1.offsetHeight); //可见内容高度;自身高度 height + padding上 + padding下 + border上 + border下 console.log(t1.scrollTop); console.log(t1.scrollHeight); // 内容高度,height + padding上 + padding下 </script> </body> </html> 示例
7、修改标签内容
可以通过找到的对象obj,修改标签内容
|
obj.innerText = "ok" obj.innerHtml = "<h1>ok</h1>" |
对于特殊的标签
input系列
textarea标签
select标签
需要通过obj.value = 'ok'形式修改内容
8、插入标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title id="2">Title</title> </head> <body> <div> <h2>ok</h2> <form action="#" id="1" class="form1" name="form1"> <input id =5 type="text"> <input type="text"> <p>男:<input id=3 type="checkbox" name="男" value="nan"></p> <input type="submit"> </form> <h1 id="h1">hao</h1> <input type="datetime-local"> </div> <script> var names = document.getElementById('5'); //得到一个普通对象 // var names = document.querySelector('*'); //得到一个最先找到的对象,可以使用通配符* names.value = "ok"; var newtag = document.createElement('a'); newtag.href = "http://www.forts.cc"; // newtag.innerText = "堡垒"; var container = document.getElementsByTagName('form')[0]; // 找到第一个H1标签 // container.appendChild(newtag); //将新标签放到该标签里面,作为H1标签的子标签 // container.insertBefore(newtag,container.firstChild); //将新标签插到H1标签第一个子标签位置 // container.innerHTML = "<input type='text' />"; //这种方式会直接把container里面的所有元素覆盖 //'beforeBegin', 'afterBegin','beforeEnd','afterEnd' // container.insertAdjacentHTML('beforeEnd', "<a href='#'>Hello</a>"); // 插在容器末尾最后一个子元素 // container.insertAdjacentHTML('beforeBegin', "<a href='#'>Hello</a>"); //插在容器前,同级插入 container.insertAdjacentHTML('afterBegin', "<a href='#'>Hello</a>"); //插在容器内,成为容器的第一个儿子 // container.insertAdjacentHTML('afterEnd', "<a href='#'>Hello</a>"); //同级插入,在容器标签的后面 console.log(names); </script> </body> </html> 示例
9、提交表单
document.getElementById('form').submit();
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="form_1" action="https://www.sogou.com/"> <div> <input type="text" name="query"/> </div> <!--第一个submit是可以提交的这个肯定没问题--> <input type="submit" value="submit"> <!--第二个button可以提交--> <input type="button" value="button" onclick="go()"> </form> <script type="text/javascript"> function go() { document.getElementById('form_1').submit(); //提交表单 } </script> </body> </html>
10、其他操作
1
2
3
|
console.log 输出框 alert 弹出框 confirm 确认框 |
confirm() ,弹出消息提示框,显示“确定”或“取消”,根据用户的选择返回True 或者 Flase
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <script type= "text/javascript" > var result = confirm( '是否继续' ); console.log(result); </script> </body> </html> |
1
2
3
4
|
// URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 |
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> 网页跳转 </div> <div> <!--在同一个标签内打开--> <input type="button" onclick="jump()" value="跳转至校花网" /> <!--新起一个标签打开--> <input type="button" onclick="jump_new()" value="跳转至百度" /> </div> <script type="text/javascript"> function jump() { window.location.href = 'http://www.xiaohuar.com/' } function jump_new() { window.open('https://www.baidu.com') } </script> </body> </html> 实例
1
2
3
4
5
|
// 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器 |
setInterval;设置定时器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <script type= "text/javascript" > function f1() { console.log( "Hello world!" ) } setInterval( 'f1()' ,1000); //设置定时器 </script> </body> </html> |
clearInterval;关闭计时器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <script type= "text/javascript" > function f1() { console.log( "Hello world!" ); clearInterval(obj); //关闭计时器,需要一个全局的句柄,这里obj就是全局的句柄。 } obj = setInterval( 'f1()' ,1000); //函数要加'',第二个参数是时间毫秒。 </script> </body> </html> |
setTimeout(); clearTimeout(obj) 也是计时器它和setinterval的区别就是,它只执行一次。
三、事件
属性 |
此事件什么时候发生(什么时候被触发 |
onabort | 图象的加载被中断 |
onblur | 元素失去焦点 |
onchange | 区域的内容被修改 |
onclick | 当用户点击某个对象时调用的事件句柄(比点击input标签时执行上面的代码例子) |
ondblclick | 当用户双击某个对象时调用的事件句柄 |
onerror | 在加载文档或图像时发生错误 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘被松开 |
onload | 一张页面或一副图片完成加载 |
onmousedown | 鼠标按钮被按下 |
onmousemove | 鼠标移动过来后 |
onmouseout | 鼠标从某个元素移开 |
onmouseover | 鼠标移动到某个元素之上 |
onmouseup | 鼠标按键被松开 |
onreset | 重置按钮被点击 |
onresize | 窗口或框架被重新调整大小 |
onselect | 文本被选中 |
onsubmit | 确认按钮被点击 |
onunload | 用户退出页面 |
ps:一个标签可以绑定多个事件。
1
|
<input type= "button" onmouseover= "edit()" onmouseout= "rollback()" value= "修改&回滚" /> |
对于事件需要注意的要点:
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签,event封装了当前事件的内容
this 表示当前标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <div onmouseover= "Func(this);" onmouseout= "Out(this);" >123</div> <input type= "text" onkeydown= "Down(this,event);" /> <script> function Down(ths,e) { console.log(e.keyCode); } function Func(ths) { ths.style.color = 'red' ; } function Out(ths) { ths.style.color = 'black' ; } </script> </body> </html> |
onunload 有差异,写在javascript里面,执行完成后才执行这个。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <script type= "text/javascript" > // 这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的. window.onload = function () { alert( "The page Load complete" ) }; function edit() { var i = document.getElementById( 'id_1' ); i.className = 'color_red' ; } function rollback() { var i = document.getElementById( 'id_1' ); i.className = '' ; //给他设置为空即可 } </script> </body> </html> |
默认事件
组织后面的事件发生:
1
2
3
4
5
|
return func(); function func(){ return false ; } |
实例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <a href= "http://etiantian.org" onclick= "return Func();" >揍你</a> <form action= "s2.html" > <div id= "form1" > <input type= "text" /> </div> <input type= "submit" value= "提交" onclick= "return SubmitForm();" /> </form> <script> function Func() { alert(123); return true ; } function SubmitForm() { var inputs = document.getElementById( 'form1' ).getElementsByTagName( 'input' ); for ( var i =0;i<inputs.length;i++){ var currentInput = inputs[i]; var val = currentInput.value; if (val.trim().length == 0){ alert( '请输入内容' ); return false ; } } return true } </script> </body> </html> |
更多详见:http://www.cnblogs.com/wupeiqi/articles/5643298.html