javascript-dom文檔對象模型2
阿新 • • 發佈：2017-10-01
class art get 輸入關鍵字 操作 根據 erb utf-8 nth 
每個標簽都是一個對象
一：查找元素
1、直接查找
document.getElementById 根據ID獲取一個標簽
document.getElementsByName 根據name屬性獲取標簽集合
document.getElementsByClassName 根據class屬性獲取標簽集合
document.getElementsByTagName 根據標簽名獲取標簽集合
2、間接查找
parentNode // 父節點 childNodes // 所有子節點 firstChild // 第一個子節點 lastChild // 最後一個子節點 nextSibling // 下一個兄弟節點 previousSibling // 上一個兄弟節點 parentElement // 父節點標簽元素 children // 所有子標簽 firstElementChild // 第一個子標簽元素 lastElementChild // 最後一個子標簽元素 nextElementtSibling // 下一個兄弟標簽元素 previousElementSibling // 上一個兄弟標簽元素
二：操作元素
1、內容
innerText 文本
outerText
innerHTML HTML內容
innerHTML
value 值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1"> 老男孩 <a>View Code谷<span>歌</span></a> </div> <input type="text" id="i2" /> <select id="i3"> <option value="11">北京1</option> <option value="12">北京2</option> <option value="13">北京3</option> </select> <textareaid="i4"></textarea> </body> </html>
搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: 0 auto;"> <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="請輸入關鍵字"/> <input type="text" placeholder="請輸入關鍵字" /> </div> <script> function Focus(){ var tag = document.getElementById(‘i1‘); var val = tag.value; if(val == "請輸入關鍵字"){ tag.value = ""; } } function Blur(){ var tag = document.getElementById(‘i1‘); var val = tag.value; if(val.length ==0){ tag.value = "請輸入關鍵字"; } } </script> </body> </html>View Code
2、屬性
attributes // 獲取所有標簽屬性
setAttribute(key,value) // 設置標簽屬性
getAttribute(key) // 獲取指定標簽屬性
增加輸入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="AddEle1();" value="+" /> <input type="button" onclick="AddEle2();" value="+" /> <div id="i1"> <p><input type="text" /></p> </div> <script> function AddEle1(){ // 創建一個標簽 // 將標簽添加到i1裏面 var tag = "<p><input type=‘text‘/></p>"; // 註意：第一個參數只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘ document.getElementById(‘i1‘).insertAdjacentHTML("beforeEnd",tag); } function AddEle2(){ // 創建一個標簽 // 將標簽添加到i1裏面 var tag = document.createElement(‘input‘); tag.setAttribute(‘type‘, ‘text‘); tag.style.fontSize = ‘16px‘; tag.style.color = ‘red‘; var p = document.createElement(‘p‘); p.appendChild(tag); document.getElementById(‘i1‘).appendChild(p); } </script> </body> </html>View Code
3、class操作
className // 獲取所有類名
classList.remove(cls) // 刪除指定類
classList.add(cls) // 添加類
4、標簽操作
1）字符串形式
2）對象方式
docment.createElement()
例子同上
5、樣式操作
##dom-輸入框鼠標移動到輸入框去除默認值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="margin: 0 auto"> <input id="i1" type="text" value="請輸入關鍵詞" onfocus="Focus();" onblur="Blur();"/> <!-- 新瀏覽器直接支持下面方式--> <input type="text" placeholder="請輸入關鍵詞"> </div> <script> function Focus(){ var tag=document.getElementById("i1") var value=tag.value if (value=="請輸入關鍵詞"){ tag.value="" } } function Blur(){ var tag=document.getElementById("i1") var value=tag.value if (value==""){ tag.value="請輸入關鍵詞" } } </script> </body> </html>View Code
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代指文檔根節點
*/
7、提交表單
document.geElementById(‘form‘).submit()
8、其他操作
console.log 輸出框
alert 彈出框
confirm 確認框
// URL和刷新
location.href 獲取URL
location.href = "url" 重定向
location.reload() 重新加載
// 定時器
setInterval 多次定時器
clearInterval 清除多次定時器
setTimeout 單次定時器
clearTimeout 清除單次定時器
##定時器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="li"></div> <input type="button" value="增加提示" onclick="tip();"> <script> function clear(){ var tag=document.getElementById("li"); tag.innerText=""; } function tip(){ var tag=document.getElementById("li"); tag.innerText="提示信息"; setTimeout("clear()",300); } </script> </body> </html>View Code
javascript-dom文檔對象模型2