js之DOM對象一

?

一、什么是HTML? DOM

• ?HTML? Document Object Model（文檔對象模型）
• ??? HTML DOM 定義了訪問和操作HTML文檔的標準方法
• ??? HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹)

二、DOM樹

?畫dom樹是為了展示文檔中各個對象之間的關系，用于對象的導航。

三、DOM節點

1.節點類型

HTML 文檔中的每個成分都是一個節點。

DOM 是這樣規定的：
?? ?整個文檔是一個文檔節點?
?? ?每個 HTML 標簽是一個元素節點?
?? ?包含在 HTML 元素中的文本是文本節點?
?? ?每一個 HTML 屬性是一個屬性節點

其中，document與element節點是重點。

2.節點關系

?

節點樹中的節點彼此擁有層級關系。
父(parent),子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

?

• ??? 在節點樹中，頂端節點被稱為根（root）
• ??? 每個節點都有父節點、除了根（它沒有父節點）
• ??? 一個節點可擁有任意數量的孩子
• ??? 同胞是擁有相同父節點的節點

下面的圖片展示了節點樹的一部分，以及節點之間的關系：

3.節點查找

有兩種方式：

　　方式一：直接查找節點（這是一個查找方法）

// 節點查找(節點也就是一個個的標簽)document.getElementById('idname');//按照id查找，拿到的是一個標簽對象document.getElementsByClassName('classname');//按照class標簽去找，得到的是一個數組里存放的標簽document.getElementsByTagName('tagname');//通過標簽名去找，拿到的也是一個數組var a = document.getElementsByName('yuan'); //按照name屬性去找,拿到的也是一個數組console.log(a); 1 // / ==2.========================2 var ele = document.getElementById('div1');3 console.log(ele.length);//返回undified4 5 var ele2 = document.getElementById('div3');6 console.log(ele2.length);//返回undified7 8 var ele3 = document.getElementsByClassName('div2'); 9 console.log(ele3.length); //返回1 10 11 var ele4 = document.getElementsByTagName('p'); 12 console.log(ele4.length) ;//返回1 13 14 var ele5 = document.getElementsByName('haiyan'); 15 console.log(ele5.length); //返回1 16 17 //====3.============================= 18 id和name的不支持 19 var div1=document.getElementById("div1"); 20 21 支持; 22 var ele= div1.getElementsByTagName("p"); 23 alert(ele.length); 24 支持 25 var ele2=div1.getElementsByClassName("div2"); 26 alert(ele2.length); 27 不支持 28 var ele3=div1.getElementById("div3"); 29 alert(ele3.length); 30 不支持 31 var ele4=div1.getElementsByName("yuan"); 32 alert(ele4.length)

　上述的length：返回的是標簽的個數，，一個是在局部下的，，，一個是在全局下的（document.~~~）

方式二：導航查找節點：通過某一個標簽的位置去查找另一個標簽（這是一個導航屬性）

'''parentElement // 父節點標簽元素children // 所有子標簽firstElementChild // 第一個子標簽元素lastElementChild // 最后一個子標簽元素nextElementtSibling // 下一個兄弟標簽元素previousElementSibling // 上一個兄弟標簽元素''' 1 // 方式二：導航查找2 //<div id ='div1'>3 // <div class="div2" name = 'haiyan'>lallala</div>4 // <div name="haiyan">lkkaakkka</div>5 // <div id ='div3'>aaaaaaaaaaaaaa</div>6 // <p>hrllo</p>7 //</div>8 //注意：1.如果是數組的話后面切記getElementsByClassName('div2')[0]9 // 2.查找元素的那些方法Elements加了s的打印的就是數組 10 // 1，================== 11 var ele = document.getElementsByClassName('div2')[0]; 12 var ele1= ele.parentElement; 13 console.log(ele1) ;//找div2標簽的父親 14 // 2.=============== 15 var ele = document.getElementById('div1'); 16 var ele1 = ele.children; 17 console.log(ele1) ; //找到div1下的所有的子標簽 18 // 3.=================== 19 var ele = document.getElementById('div1'); 20 var ele1 = ele.firstElementChild; 21 console.log(ele1); //找到div1下的第一個子標簽的元素 22 // 4.================== 23 var ele = document.getElementById('div1'); 24 var ele1 = ele.lastElementChild; 25 console.log(ele1); //找到div1下的最后一個子標簽的元素 26 // 5.=============== 27 var ele = document.getElementsByName('haiyan')[0]; 28 var ele1 = ele.nextElementSibling; 29 console.log(ele1) ; //下一個兄弟標簽元素 30 // 6.=============== 31 var ele = document.getElementsByName('haiyan')[0]; 32 var ele1 = ele.previousElementSibling; 33 console.log(ele1) //上一個兄弟標簽元素

4.節點操作

1.創建節點

createElement(標簽名) ：創建一個指定名稱的元素。 例：var tag=document.createElement(“input")tag.setAttribute('type','text');

2.添加節點

追加一個子節點（作為最后的子節點）somenode.appendChild(newnode)把增加的節點放到某個節點的前邊somenode.insertBefore(newnode,某個節點);

3.刪除節點

removeChild()：獲得要刪除的元素，通過父元素調用刪除

4.替換節點

somenode.replaceChild(newnode, 某個節點);

5.節點屬性操作

　　1.獲取文本節點的值：innerText??? innerHTML

　　　　innerText:不管你是賦值還是取值，只能識別純文本

innerHtml:既可以識別純文本，也可以識別標簽 // 文本屬性 // 1.innerText:不管你是賦值還是取值，只能識別純文本var a1 = document.getElementsByClassName('c2')[0]; // console.log(a1);//取值操作console.log(a1.innerText); //你好嗎/console.log(a1.innerHTML); //你好嗎///賦值操作a1.innerText='Egon';a1.innerHTML='<a href="">hello</a>'; // 2.innerHtml:既可以識別純文本，也可以識別標簽var b1 = document.getElementsByClassName('c2')[1]; // console.log(b1);//取值操作console.log(b1.innerText);console.log(b1.innerHTML);//賦值操作b1.innerText = 'lala'; b1.innerHTML = '<input type="text">';

　　2.屬性（attribute）操作：

elementNode.setAttribute(name,value) elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML)elementNode.removeAttribute(“屬性名”); 　　泛指所有的屬性
　　getAttribute 可以操作其他的，，但是不可以操作class <body><div class="c1" id="d1">DIV</div> <script>var ele = document.getElementsByClassName('c1')[0];ele.id='d2';//修改idconsole.log(ele);//取屬性值 : // 方式一console.log(ele.getAttribute('id')); // 方式二console.log(ele.id); / 屬性賦值 // 方式一ele.setAttribute('id','d3');console.log(ele); // 方式二ele.id = 'd3'; console.log(ele);

　　3.value獲取當前選中的value值

? ? ? 　　? 1.input? ?
?? ???　　 ?2.select （selectedIndex）
?? ??? ?　　3.textarea ?

　　4.關于class的操作：

// class屬性=============var ele = document.getElementsByClassName('c1')[0];console.log(ele.className); //打印類的名字ele.classList.add('hide');console.log(ele); //<div class="c1 hide" id="d1">ele.classList.remove('hide');//吧添加的remove移除了console.log(ele)

　　5.改變css樣式：

<p id="p2">Hello world!</p>document.getElementById("p2").style.color="blue";.style.fontSize=48px

四、DOM Event(事件)

1.事件類型

onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。onfocus 元素獲得焦點。 練習：輸入框 onblur 元素失去焦點。 應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用于表單元素,當元素內容被改變時觸發.（三級聯動）onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下并松開。 onkeyup 某個鍵盤按鍵被松開。onload 一張頁面或一幅圖像完成加載。onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開onselect 文本被選中。 onsubmit 確認按鈕被點擊

2.綁定事件方式

方式一

<!--綁定事件的方式一--> <div οnclick="foo(this)">div</div> <div class="c1">div2</div> <script>function foo(self) {console.log(self); //<div οnclick="foo(this)" style="color: red;">self.style.color = 'red';}

方式二

//方式二 // 事件的綁定方式2：標簽對象.on事件 = function (){}var ele=document.getElementsByClassName("c1")[0];ele.οnclick=function () {console.log(this); // this 代指： 當前觸發時間的標簽對象；this.style.fontSize="30px"};

3.事件介紹

4.事件傳播

實例練習

1.左側菜單

2.搜索框

3.模態對話框

4.表格案例

5.select移動

6.二級聯動

7.跑馬燈與tab切換

?

轉載于:https://www.cnblogs.com/kcwxx/p/10152449.html

總結

以上是生活随笔為你收集整理的前端之JavaScript：JS之DOM对象一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。