DOM對象
DOM對象
什麼是HTML DOM
- HTML Document Object Model (文檔對象模型)
- HTML DOM 定義了訪問和操做HTML文檔的標準方法
- HTMLDOM把HTML文檔呈現爲帶有元素、屬性和文本的樹結構(節點樹)
DOM樹
畫DOM樹是爲了展現文檔中各個對象之間的關係，用於對象的導航javascript
DOM節點
節點類型
HTML文檔中的每一個成分都是一個節點html
DOM規定：java
- 整個文檔是一個文檔節點
- 每一個HTML標籤是一個元素節點
- 包含在HTML元素中的文本是文本節點
- 每一個HTML屬性是一個屬性節點
其中，Document與Element節點是重點數組
節點關係
節點樹中的節點彼此擁有層級關係瀏覽器
父(parent)，子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞(兄弟或姐妹)。app
- 在節點樹中，頂端節點被稱爲根（root）
- 每一個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁用任意數量的子節點
- 同胞是擁有相同父節點的節點
下面的圖徵展現了節點樹中的一部分，以及節點之間的關係：ide
訪問HTML元素(節點)，訪問HTML元素等同於訪問節點，咱們可以以不一樣的方式來訪問HTML元素。函數
節點查找
直接查找
documemt.getElementById() 根據id查找，獲得一個element對象
document.getElementsByClassName() 根據class查找，獲得多個element構成的數組
document.getElementsByTagName() 根據標籤查找，獲得多個element構成的數組
document.getElementsByName() 根據name屬性查找，得麼多個element構成的數組
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script> </body> </html>
注意：涉及到尋找元素，注意<script>標籤的位置！
導航查找
js中沒有辦法找到全部的兄弟標籤this
parentElement 父節點標籤元素
children 全部子標籤
firstElementChild 第一個子標籤元素
lastElemenChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一兄弟標籤元素
節點的增刪改查
建立節點
//語法：
createElement("標籤名") 建立一個指定名稱的元素
例：
var tag = document.createElement("input"); tag.setAttribute("type","text");
添加節點
追加一個子節點(做爲最後的子節點)。也可使用此方法從一個元素向另外一個元素移動元素。spa
//語法：追加一個子節點（做爲最後的子節點）
父節點對象.appendChild(子節點對象)
//語法：把增長的節點放到某個節點的前邊
父節點對象.insertBefore(增長的節點，某個節點)
刪除節點
//語法： 獲取要刪除的元素，經過父元素調用刪除 父節點對象.removeChild(子節點)
替換節點
//語法： 父節點對象.replaceChild(新節點，舊節點)
節點屬性操做
文本屬性操做
- innerHTML
- innerText
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="i1">123</li> <li id="i2"><a href="">234</a></li> <li>345</li> <li>456</li> </ul> <script> // 獲取文本 let ele = document.getElementById("i2"); console.log(ele.innerHTML); //<a href="">234</a> console.log(ele.innerText); //234 // 賦值文本 // ele.innerHTML = "Ethan"; // ele.innerText = "Ethan"; // ele.innerHTML = "<a href=''>ethan</a>"; // a標籤 頁面上顯示ethan超連接 // ele.innerText = "<a href=''>ethan</a>"; // 文本 <a href=''>ethan</a> </script> </body> </html>
attribute屬性操做
設置普通屬性
節點對象.setAttribute("屬性名", value);
節點對象.getAttribute("屬性名");
節點對象.removeAttribute("屬性名");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="i1">123</li> </ul> <input type="text" id="i2"> <script> let ele1 = document.getElementById("i1"); let ele2 = document.getElementById("i2"); ele1.setAttribute("ethan","123"); console.log(ele1.getAttribute("ethan")); ele2.value = 0; </script> </body> </html>
value屬性操做
適用於標籤：
- input
- select
- textarea
class屬性操做
節點對象.classList.add() 添加class屬性值
節點對象.classList.remove() 刪除class屬性值
節點對象.className 獲取class屬性值
指定CSS操做
//語法：
節點對象.style.屬性名=屬性值；
例：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontSize=48px;
DOM Event(事件)
事件類型
onclick 當用戶點擊某個對象時調用的事件句柄
ondblclick 當用戶雙擊某個對象時調用的事件句柄
onfocus 元素得到焦點
onblur 元素失去焦點 應用場景：用於表單驗證，用戶離開某個輸入框時，表明已經輸入完成，能夠對其進行驗證
onchange 域的內容被改變 應用場景：一般用於表單元素，當元素內容被改變時觸發(三級聯動)
onkeydown 某個鍵盤按鍵被按下 應用場景：當用戶在最後一個輸入框按下回車按鍵時，表單提交。
onkeypress 某個鍵盤按鍵被按下並鬆開
onkeyup 某個鍵盤按鍵被鬆開
onload 一張頁面或一幅圖像完成加載
onmousedown 鼠標按鈕被按下
onmousemove 鼠標被移動
onmouseout 鼠標從某元素移開
onmouseover 鼠標長移到某元素之上
onmouseleave 鼠標從元素離開
onselect 文本被選中
onsubmit 確認按鈕被點擊
綁定事件方式
方式1：
<div id="div" onclick="foo(this)">點我呀</div>
<script>
function foo(self){ // 形參不能是this;
console.log("不點!");
console.log(self);
}
</script>
方式2：
<p id="abc">試一試!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){ console.log("ok"); console.log(this); // this直接用 }; </script>
事件介紹
1. onload
- onload屬性開發中，只給body元素加。這個屬性的觸發標誌着頁面內容被加載完成
- 當有些事性咱們但願頁面加載完馬上執行，那麼可使用該事件屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; }; // function fun() { // var ele=document.getElementById("ppp"); // ele.onclick=function(){ // alert(123) // }; // } </script> </head> <body> <p id="ppp">hello p</p> </body> </html>
2. onsubmit
- 當表單在提交時觸發，該屬性也只能給form元素使用
- 應用場景：在表單提交前驗證用戶輸入是否正確。若是驗證失敗。在該方法中咱們應該阻止表單提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ //阻止表單提交方式1(). //onsubmit 命名的事件函數,能夠接受返回值. 其中返回false表示攔截表單提交.其餘爲放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("驗證失敗 表單不會提交!"); // return false; // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動做。 alert("驗證失敗 表單不會提交!"); event.preventDefault(); } }; </script> </head> <body> <form id="form"> <input type="text"/> <input type="submit" value="點我!" /> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; margin-left: 10px; } </style> <script> window.onload=function(){ let form=document.getElementById("form"); form.onsubmit=function () { // 校驗數據 let user=document.getElementById("user").value; let email=document.getElementById("email").value; console.log(user,email); if (user.length<5){ console.log("長度不夠!"); document.getElementById("user").nextElementSibling.innerHTML="長度不夠"; setTimeout(function () { document.getElementById("user").nextElementSibling.innerHTML=""; },1000); return false } }; } </script> </head> <body> <input type="text" class="c1"> <hr> <form id="form" action="" method="get"> <div> <label for="user">姓名</label> <input type="text" name="user" id="user"><span class="error"></span> </div> <div> <label for="email">郵箱</label> <input type="text" name="email" id="email"><span class="error"></span> </div> <input type="submit"> </form> </body>
3. 事件傳播
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"> <div id="abc_2" style="border:1px solid red;width:200px;height:200px;"> </div> </div> <script type="text/javascript"> document.getElementById("abc_1").onclick=function(){ alert('111'); }; document.getElementById("abc_2").onclick=function(event){ alert('222'); event.stopPropagation(); //阻止事件向外層div傳播. } </script>
4. onselect
<input type="text"> <script> var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){ alert(123); } </script>
5. onchange
<select name="" id=""> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> <script> var ele=document.getElementsByTagName("select")[0]; ele.onchange=function(){ alert(123); } </script>
6. onkeydown
Event 對象：Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,而且會在事件函數被調用時傳給事件函數.咱們得到僅僅須要接收一下便可.好比onkeydown,咱們想知道哪一個鍵被按下了，須要問下event對象的屬性，這裏就時KeyCode.
<input type="text" id="t1"/> <script type="text/javascript"> var ele=document.getElementById("t1"); ele.onkeydown=function(e){ e=e||window.event; var keynum=e.keyCode; var keychar=String.fromCharCode(keynum); alert(keynum+'----->'+keychar); }; </script>
7. onmouseout與onmouseleave事件的區別
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width: 300px; } #title{ cursor: pointer; background: #ccc; } #list{ display: none; background:#fff; } #list div{ line-height: 50px; } #list .item1{ background-color: green; } #list .item2{ background-color: rebeccapurple; } #list .item3{ background-color: lemonchiffon; } </style> </head> <body> <p>先看下使用mouseout的效果:</p> <div id="container"> <div id="title">使用了mouseout事件↓</div> <div id="list"> <div class="item1">第一行</div> <div class="item2">第二行</div> <div class="item3">第三行</div> </div> </div> <script> // 1.不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。 // 2.只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。 var container=document.getElementById("container"); var title=document.getElementById("title"); var list=document.getElementById("list"); title.onmouseover=function(){ list.style.display="block"; }; container.onmouseleave=function(){ // 改成mouseout試一下 list.style.display="none"; }; /* 由於mouseout事件是會冒泡的，也就是onmouseout事件可能被同時綁定到了container的子元素title和list 上，因此鼠標移出每一個子元素時也都會觸發咱們的list.style.display="none"; */ /* 思考: if: list.onmouseout=function(){ list.style.display="none"; }; 爲何移出第一行時,整個list會被隱藏? 實際上是一樣的道理,onmouseout事件被同時綁定到list和它的三個子元素item上,因此離開任何一個 子元素一樣會觸發list.style.display="none"; */ </script> </body> </html>
相關文章
- 1. jQuery對象和DOM對象
- 2. Jquery對象和DOM對象
- 3. XMLHttpRequest對象和DOM對象
- 4. jQuery對象與DOM對象
- 5. JQuery對象與DOM對象
- 6. DOM對象和JQuery對象
- 7. DOM對象之document對象
- 8. JQuery對象和DOM對象
- 9. DOM對象和Jquery對象
- 10. BOM對象和DOM對象
- 更多相關文章...
- • XML DOM - CDATASection 對象 - XML DOM 教程
- • XML DOM - Comment 對象 - XML DOM 教程
- • RxJava操作符（一）Creating Observables
- • RxJava操作符（九）Connectable Observable Operators
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery對象和DOM對象
- 2. Jquery對象和DOM對象
- 3. XMLHttpRequest對象和DOM對象
- 4. jQuery對象與DOM對象
- 5. JQuery對象與DOM對象
- 6. DOM對象和JQuery對象
- 7. DOM對象之document對象
- 8. JQuery對象和DOM對象
- 9. DOM對象和Jquery對象
- 10. BOM對象和DOM對象