文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現方式。我們最為關心的是，DOM把網頁和腳本以及其他的編程語言聯系了起來。DOM屬于瀏覽器，而不是JavaScript語言規范里的規定的核心內容。
一、查找元素
1、直接查找
?
| 1 2 3 4 | document.getElementById???????????? 根據ID獲取一個標簽 document.getElementsByName????????? 根據name屬性獲取標簽集合 document.getElementsByClassName???? 根據class屬性獲取標簽集合 document.getElementsByTagName?????? 根據標簽名獲取標簽集合 |
2、間接查找
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | parentNode????????? // 父節點 childNodes????????? // 所有子節點 firstChild????????? // 第一個子節點 lastChild?????????? // 最后一個子節點 nextSibling???????? // 下一個兄弟節點 previousSibling???? // 上一個兄弟節點 parentElement?????????? // 父節點標簽元素 children??????????????? // 所有子標簽 firstElementChild?????? // 第一個子標簽元素 lastElementChild??????? // 最后一個子標簽元素 nextElementtSibling???? // 下一個兄弟標簽元素 previousElementSibling? // 上一個兄弟標簽元素 |
二、操作
1、內容
?
| 1 2 3 4 5 | innerText?? 文本 outerText innerHTML?? HTML內容 innerHTML?? value?????? 值 |
2、屬性
?
| 1 2 3 4 5 6 7 8 9 | attributes??????????????? // 獲取所有標簽屬性 setAttribute(key,value)?? // 設置標簽屬性 getAttribute(key)???????? // 獲取指定標簽屬性 /* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr); */ |
<!DOCTYPE html>
<html>
<head lang=
"en"><meta charset=
"UTF-8"><title></title>
</head>
<body><input type=
"button" value=
"全選" οnclick=
"CheckAll();"/><input type=
"button" value=
"取消" οnclick=
"CancelAll();"/><input type=
"button" value=
"反選" οnclick=
"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操作
?
| 1 2 3 | className??????????????? // 獲取所有類名 classList.remove(cls)??? // 刪除指定類 classList.add(cls)?????? // 添加類 |
4、標簽操作
a.創建標簽
?
| 1 2 3 4 5 6 7 8 | // 方式一 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.操作標簽
?
| 1 2 3 4 5 6 7 8 9 10 11 | // 方式一 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]) |
5、樣式操作
?
| 1 2 3 4 | var obj = document.getElementById('i1') obj.style.fontSize = "32px"; obj.style.backgroundColor = "red"; |
<input οnfοcus=
"Focus(this);" οnblur=
"Blur(this);" id=
"search" value=
"請輸入關鍵字" style=
"color: gray;" /><script>
function Focus(ths){ths.style.color =
"black";if(ths.value ==
'請輸入關鍵字' || ths.value.trim() ==
""){ths.value =
"";}}function Blur(ths){if(ths.value.trim() ==
""){ths.value =
'請輸入關鍵字';ths.style.color =
'gray';}else{ths.style.color =
"black";}}</script>
Demo 6、位置操作
?
| 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 | 總文檔高度 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代指文檔根節點 */ |
<!DOCTYPE html>
<html>
<head lang=
"en"><meta charset=
"UTF-8"><title></title>
</head>
<body style=
"margin: 0;"><div style=
"height: 900px;"></div><div style=
"padding: 10px;"><div id=
"i1" style=
"height:190px;padding: 2px;border: 1px solid red;margin: 8px;"><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></div></div><script>
var i1 = document.getElementById(
'i1');console.log(i1.clientHeight); // 可見區域：height +
paddingconsole.log(i1.clientTop); //
border高度console.log('=====');console.log(i1.offsetHeight); // 可見區域：height + padding +
borderconsole.log(i1.offsetTop); //
上級定位標簽的高度console.log('=====');console.log(i1.scrollHeight); //全文高：height +
paddingconsole.log(i1.scrollTop); //
滾動高度console.log('=====');</script>
</body>
</html>
test <!DOCTYPE html>
<html>
<head lang=
"en"><meta charset=
"UTF-8"><title></title>
</head>
<style>
body{margin: 0px;}img {border: 0;}ul{padding: 0;margin: 0;list-
style: none;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.wrap{width: 980px;margin: 0 auto;}.pg-
header{background-color:
#303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2
);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2
);box-shadow: 0 2px 5px rgba(0,0,0,.2
);}.pg-
header .logo{float: left;padding:5px 10px 5px 0px;}.pg-
header .logo img{vertical-
align: middle;width: 110px;height: 40px;}.pg-
header .nav{line-
height: 50px;}.pg-
header .nav ul li{float: left;}.pg-
header .nav ul li a{display: block;color: #ccc;
padding: 0 20px;text-
decoration: none;font-
size: 14px;}.pg-
header .nav ul li a:hover{color: #fff;background-color:
#425a66;
}.pg-
body{}.pg-
body .catalog{position: absolute;top:60px;width: 200px;background-color:
#fafafa;
bottom: 0px;}.pg-
body .catalog.fixed{position: fixed;top:10px;}.pg-body .catalog .catalog-
item.active{color: #fff;background-color:
#425a66;
}.pg-
body .content{position: absolute;top:60px;width: 700px;margin-
left: 210px;background-color:
#fafafa;
overflow: auto;}.pg-
body .content .section{height: 500px;}
</style>
<body οnscrοll=
"ScrollEvent();">
<div
class=
"pg-header"><div
class=
"wrap clearfix"><div
class=
"logo"><a href=
"#"><img src=
"http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"></a></div><div
class=
"nav"><ul><li><a href=
"#">首頁</a></li><li><a href=
"#">功能一</a></li><li><a href=
"#">功能二</a></li></ul></div></div>
</div>
<div
class=
"pg-body"><div
class=
"wrap"><div
class=
"catalog"><div
class=
"catalog-item" auto-to=
"function1"><a>第1張</a></div><div
class=
"catalog-item" auto-to=
"function2"><a>第2張</a></div><div
class=
"catalog-item" auto-to=
"function3"><a>第3張</a></div></div><div
class=
"content"><div menu=
"function1" class=
"section"><h1>第一章</h1></div><div menu=
"function2" class=
"section"><h1>第二章</h1></div><div menu=
"function3" class=
"section"><h1>第三章</h1></div></div></div></div><script>
function ScrollEvent(){var bodyScrollTop =
document.body.scrollTop;if(bodyScrollTop>50
){document.getElementsByClassName('catalog')[0].classList.add(
'fixed');}else{document.getElementsByClassName('catalog')[0].classList.remove(
'fixed');}}</script>
</body>
</html>
Demo-滾動固定 <!DOCTYPE html>
<html>
<head lang=
"en"><meta charset=
"UTF-8"><title></title>
</head>
<style>
body{margin: 0px;}img {border: 0;}ul{padding: 0;margin: 0;list-
style: none;}h1{padding: 0;margin: 0;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.wrap{width: 980px;margin: 0 auto;}.pg-
header{background-color:
#303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2
);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2
);box-shadow: 0 2px 5px rgba(0,0,0,.2
);}.pg-
header .logo{float: left;padding:5px 10px 5px 0px;}.pg-
header .logo img{vertical-
align: middle;width: 110px;height: 40px;}.pg-
header .nav{line-
height: 50px;}.pg-
header .nav ul li{float: left;}.pg-
header .nav ul li a{display: block;color: #ccc;
padding: 0 20px;text-
decoration: none;font-
size: 14px;}.pg-
header .nav ul li a:hover{color: #fff;background-color:
#425a66;
}.pg-
body{}.pg-
body .catalog{position: absolute;top:60px;width: 200px;background-color:
#fafafa;
bottom: 0px;}.pg-
body .catalog.fixed{position: fixed;top:10px;}.pg-body .catalog .catalog-
item.active{color: #fff;background-color:
#425a66;
}.pg-
body .content{position: absolute;top:60px;width: 700px;margin-
left: 210px;background-color:
#fafafa;
overflow: auto;}.pg-
body .content .section{height: 500px;border: 1px solid red;}
</style>
<body οnscrοll=
"ScrollEvent();">
<div
class=
"pg-header"><div
class=
"wrap clearfix"><div
class=
"logo"><a href=
"#"><img src=
"http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"></a></div><div
class=
"nav"><ul><li><a href=
"#">首頁</a></li><li><a href=
"#">功能一</a></li><li><a href=
"#">功能二</a></li></ul></div></div>
</div>
<div
class=
"pg-body"><div
class=
"wrap"><div
class=
"catalog" id=
"catalog"><div
class=
"catalog-item" auto-to=
"function1"><a>第1張</a></div><div
class=
"catalog-item" auto-to=
"function2"><a>第2張</a></div><div
class=
"catalog-item" auto-to=
"function3"><a>第3張</a></div></div><div
class=
"content" id=
"content"><div menu=
"function1" class=
"section"><h1>第一章</h1></div><div menu=
"function2" class=
"section"><h1>第二章</h1></div><div menu=
"function3" class=
"section"><h1>第三章</h1></div></div></div></div><script>
function ScrollEvent(){var bodyScrollTop =
document.body.scrollTop;if(bodyScrollTop>50
){document.getElementsByClassName('catalog')[0].classList.add(
'fixed');}else{document.getElementsByClassName('catalog')[0].classList.remove(
'fixed');}var content = document.getElementById(
'content');var sections =
content.children;for(var i=0;i<sections.length;i++
){var current_section =
sections[i];//
當前標簽距離頂部絕對高度var scOffTop = current_section.offsetTop + 60
;//
當前標簽距離頂部，相對高度var offTop = scOffTop -
bodyScrollTop;//
當前標簽高度var height =
current_section.scrollHeight;if(offTop<0 && -offTop <
height){//
當前標簽添加active//
其他移除 activevar menus = document.getElementById(
'catalog').children;var current_menu =
menus[i];current_menu.classList.add('active');for(var j=0;j<menus.length;j++
){if(menus[j] ==
current_menu){}else{menus[j].classList.remove('active');}}break;}}}</script>
</body>
</html>
Demo-滾動菜單 <!DOCTYPE html>
<html>
<head lang=
"en"><meta charset=
"UTF-8"><title></title>
</head>
<style>
body{margin: 0px;}img {border: 0;}ul{padding: 0;margin: 0;list-
style: none;}h1{padding: 0;margin: 0;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.wrap{width: 980px;margin: 0 auto;}.pg-
header{background-color:
#303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2
);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2
);box-shadow: 0 2px 5px rgba(0,0,0,.2
);}.pg-
header .logo{float: left;padding:5px 10px 5px 0px;}.pg-
header .logo img{vertical-
align: middle;width: 110px;height: 40px;}.pg-
header .nav{line-
height: 50px;}.pg-
header .nav ul li{float: left;}.pg-
header .nav ul li a{display: block;color: #ccc;
padding: 0 20px;text-
decoration: none;font-
size: 14px;}.pg-
header .nav ul li a:hover{color: #fff;background-color:
#425a66;
}.pg-
body{}.pg-
body .catalog{position: absolute;top:60px;width: 200px;background-color:
#fafafa;
bottom: 0px;}.pg-
body .catalog.fixed{position: fixed;top:10px;}.pg-body .catalog .catalog-
item.active{color: #fff;background-color:
#425a66;
}.pg-
body .content{position: absolute;top:60px;width: 700px;margin-
left: 210px;background-color:
#fafafa;
overflow: auto;}.pg-
body .content .section{height: 500px;border: 1px solid red;}
</style>
<body οnscrοll=
"ScrollEvent();">
<div
class=
"pg-header"><div
class=
"wrap clearfix"><div
class=
"logo"><a href=
"#"><img src=
"http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"></a></div><div
class=
"nav"><ul><li><a href=
"#">首頁</a></li><li><a href=
"#">功能一</a></li><li><a href=
"#">功能二</a></li></ul></div></div>
</div>
<div
class=
"pg-body"><div
class=
"wrap"><div
class=
"catalog" id=
"catalog"><div
class=
"catalog-item" auto-to=
"function1"><a>第1張</a></div><div
class=
"catalog-item" auto-to=
"function2"><a>第2張</a></div><div
class=
"catalog-item" auto-to=
"function3"><a>第3張</a></div></div><div
class=
"content" id=
"content"><div menu=
"function1" class=
"section"><h1>第一章</h1></div><div menu=
"function2" class=
"section"><h1>第二章</h1></div><div menu=
"function3" class=
"section" style=
"height: 200px;"><h1>第三章</h1></div></div></div></div><script>
function ScrollEvent(){var bodyScrollTop =
document.body.scrollTop;if(bodyScrollTop>50
){document.getElementsByClassName('catalog')[0].classList.add(
'fixed');}else{document.getElementsByClassName('catalog')[0].classList.remove(
'fixed');}var content = document.getElementById(
'content');var sections =
content.children;for(var i=0;i<sections.length;i++
){var current_section =
sections[i];//
當前標簽距離頂部絕對高度var scOffTop = current_section.offsetTop + 60
;//
當前標簽距離頂部，相對高度var offTop = scOffTop -
bodyScrollTop;//
當前標簽高度var height =
current_section.scrollHeight;if(offTop<0 && -offTop <
height){//
當前標簽添加active//
其他移除 active//
如果已經到底部，現實第三個菜單// 文檔高度 ＝ 滾動高度 +
視口高度var a = document.getElementsByClassName(
'content')[0].offsetHeight + 60
;var b = bodyScrollTop +
document.documentElement.clientHeight;console.log(a+60
,b);if(a ==
b){var menus = document.getElementById(
'catalog').children;var current_menu = document.getElementById(
'catalog').lastElementChild;current_menu.classList.add('active');for(var j=0;j<menus.length;j++
){if(menus[j] ==
current_menu){}else{menus[j].classList.remove('active');}}}else{var menus = document.getElementById(
'catalog').children;var current_menu =
menus[i];current_menu.classList.add('active');for(var j=0;j<menus.length;j++
){if(menus[j] ==
current_menu){}else{menus[j].classList.remove('active');}}}break;}}}</script>
</body>
</html>
Demo-滾動高度 7、提交表單
?
| 1 | document.geElementById('form').submit() |
8、其他操作
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | console.log???????????????? 輸出框 alert?????????????????????? 彈出框 confirm???????????????????? 確認框 ?? // URL和刷新 location.href?????????????? 獲取URL location.href = "url"?????? 重定向 location.reload()?????????? 重新加載 ?? // 定時器 setInterval???????????????? 多次定時器 clearInterval?????????????? 清除多次定時器 setTimeout????????????????? 單次定時器 clearTimeout??????????????? 清除單次定時器 |
三、事件
對于事件需要注意的要點：
this標簽當前正在操作的標簽，event封裝了當前事件的內容。
實例：
<!DOCTYPE html>
<html><head><meta charset='utf-8' /><title></title><style>
.gray{color:gray;}.black{color:black;}</style><script type="text/javascript">
function Enter(){var id= document.getElementById("tip"
)id.className = 'black'
;if(id.value=='請輸入關鍵字'||id.value.trim()==''
){id.value = ''
}}function Leave(){var id= document.getElementById("tip"
)var val =
id.value;if(val.length==0||id.value.trim()==''
){id.value = '請輸入關鍵字'
id.className = 'gray'
;}else{id.className = 'black'
;}}</script></head><body><input type='text' class='gray' id='tip' value='請輸入關鍵字' οnfοcus='Enter();' οnblur='Leave();'/></body>
</html>
搜索框 <!DOCTYPE html>
<html><head><meta charset='utf-8' ><title>歡迎blue shit蒞臨指導 </title><script type='text/javascript'>
function Go(){var content =
document.title;var firstChar = content.charAt(0
)var sub = content.substring(1
,content.length)document.title = sub +
firstChar;}setInterval('Go()',1000
);</script></head><body></body>
</html>
跑馬燈 ?
?
轉載于:https://www.cnblogs.com/caoqh/p/10622165.html
總結
以上是生活随笔為你收集整理的Python开发【第十二篇】：DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
