web前端【第七篇】JS的DOM對象一
阿新 • • 發佈：2018-02-20
查找 all 第七篇 children 離開 驗證 eat scrip image
一、什麽是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);//length屬性
// / ==2.========================
var ele = document.getElementById(‘div1‘);
console.log(ele.length);//返回undified
var ele2 = document.getElementById(‘div3‘);
console.log(ele2.length);//返回undified
var ele3 = document.getElementsByClassName(‘div2‘);
console.log(ele3.length); //返回1
var ele4 = document.getElementsByTagName(‘p‘);
console.log(ele4.length) ;//返回1
var ele5 = document.getElementsByName(‘haiyan‘);
console.log(ele5.length); //返回1
//====3.=============================
id和name的不支持
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)上述的length：返回的是標簽的個數，，一個是在局部下的，，，一個是在全局下的（document.~~~）
方式二：導航查找節點：通過某一個標簽的位置去查找另一個標簽（這是一個導航屬性）
‘‘‘ parentElement // 父節點標簽元素 children // 所有子標簽 firstElementChild // 第一個子標簽元素 lastElementChild // 最後一個子標簽元素 nextElementtSibling // 下一個兄弟標簽元素 previousElementSibling // 上一個兄弟標簽元素 ‘‘‘
// 方式二：導航查找
//<div id =‘div1‘>
// <div class="div2" name = ‘haiyan‘>lallala</div>
// <div name="haiyan">lkkaakkka</div>
// <div id =‘div3‘>aaaaaaaaaaaaaa</div>
// <p>hrllo</p>
//</div>
//註意：1.如果是數組的話後面切記getElementsByClassName(‘div2‘)[0]
// 2.查找元素的那些方法Elements加了s的打印的就是數組
// 1，==================
var ele = document.getElementsByClassName(‘div2‘)[0];
var ele1= ele.parentElement;
console.log(ele1) ;//找div2標簽的父親
// 2.===============
var ele = document.getElementById(‘div1‘);
var ele1 = ele.children;
console.log(ele1) ; //找到div1下的所有的子標簽
// 3.===================
var ele = document.getElementById(‘div1‘);
var ele1 = ele.firstElementChild;
console.log(ele1); //找到div1下的第一個子標簽的元素
// 4.==================
var ele = document.getElementById(‘div1‘);
var ele1 = ele.lastElementChild;
console.log(ele1); //找到div1下的最後一個子標簽的元素
// 5.===============
var ele = document.getElementsByName(‘haiyan‘)[0];
var ele1 = ele.nextElementSibling;
console.log(ele1) ; //下一個兄弟標簽元素
// 6.===============
var ele = document.getElementsByName(‘haiyan‘)[0];
var ele1 = ele.previousElementSibling;
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‘;//修改id
console.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 onclick="foo(this)">div</div>
<div class="c1">div2</div>
<script>
function foo(self) {
console.log(self); //<div onclick="foo(this)" style="color: red;">
self.style.color = ‘red‘;
}
方式二
//方式二
// 事件的綁定方式2：標簽對象.on事件 = function (){}
var ele=document.getElementsByClassName("c1")[0];
ele.onclick=function () {
console.log(this); // this 代指： 當前觸發時間的標簽對象；
this.style.fontSize="30px"
};
3.事件介紹
4.事件傳播
實例練習
1.左側菜單
2.搜索框
3.模態對話框
4.表格案例
5.select移動
6.二級聯動
7.跑馬燈與tab切換
web前端【第七篇】JS的DOM對象一