原生js操作Dom命令總結

常用的dom方法

    document.getElementById(“box”);//通過id獲取標簽
    document.getElementsByTagName(“div”);根據標簽名獲取頁面元素

注意：
    由於獲取結果可能是多個，element后面要加s
根據標簽獲取的結果是偽數組形式，偽數組是不具備數組的方法。
要操作偽數組中的所有元素需要遍歷偽數組。

根據標簽名獲取元素時，有可能獲取到的標簽只有一個，但是形式還是偽數組。

根據標簽名獲取時，document可以更換為任意標簽

在box中獲取li標簽。
注意： 根據id獲取的時候，前面只能寫document

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

這里寫圖片描述
- document.getElementsByclassName(“box1”) 根據類名獲取頁面元素
- window.onload()中的代碼會在頁面完全加載后執行。
設置標簽的樣式等方法
對標簽的樣式設置使用.style

var box=document.getElementById("box");
box.style.width="100px";
box.style.backgroundColor="#ff00000"//帶有段橫線的屬性要是用駝峰命名的方式。

    1
    2
    3

設置標簽的內容。
box.innerHtml=”哈哈”；

事件類型
- 點擊事件 onclick
- 鼠標移入 onmouseover
- 鼠標移出 onmouseout

類名屬性
訪問標簽的類名屬性通過 標簽.className

標簽默認事件
某些標簽具有默認的效果，例如a標簽的跳轉，有時候我們不想要這種效果，可以在事件最后加上return false;
這里寫圖片描述
循環添加事件
當我們進行循環添加事件的時候，在事件內部不能使用i，因為i的值已經是循環的結束條件那個值了（根據循環設置的具體情況而定）。

<script>
var box=document.getElementsByClassName("box");
for(var i=0;i<box.length;i++){
    box[i].onclick=function () {
        alert(this.innerHTML);
    }
}
</script>

    1
    2
    3
    4
    5
    6
    7
    8

焦點事件
onfocus 文本框獲取焦點時觸發事件
onblur 失去焦點時觸發事件
表單的常用屬性：
input獲取內部文本 使用value ipt.value

表單的屬性
（不太常用）禁用表單 ipt.disabled 可以給表單禁用。設置值為true表示禁用，false表示啟用
復選框選中 cb.checked 值為true表示選中 值為false表示沒選中
下拉菜單選中 doudou.selected 值為true表示選中，為false表示沒選中
全選反選的案例
方式一：使用flag（需要掌握）

這里寫圖片描述
方式二：不使用flag

這里寫圖片描述

樣式相關
樣式表有三種方式

內嵌樣式（inline Style）：是寫在Tag里面的，內嵌樣式只對所有的Tag有效。

內部樣式（internal Style Sheet）：是寫在HTML的里面的，內部樣式只對所在的網頁有效。

外部樣式表（External Style Sheet）：如果很多網頁需要用到同樣的樣式(Styles)，將樣式(Styles)寫在一個以.css為后綴的CSS文件里，然后在每個需要用到這些樣式(Styles)的網頁里引用這個CSS文件。 最常用的是style屬性，在JavaScript中，通過document.getElementById(id).style.XXX就可以獲取到XXX的值，但意外的是，這樣做只能取到通過內嵌方式設置的樣式值，即style屬性里面設置的值。

通過標簽.style.width 只能獲取行內設置的樣式屬性，內嵌式和外鏈式都無法獲取。

getComputedStyle(標簽,false).width 可以獲取計算后的樣式(ie不支持)

console.log(getComputedStyle(box,null).height);
console.log(getComputedStyle(box,null)["height"]);

    1
    2

ie低版本不支持getComputedStyle
標簽.currentStyle.height

console.log(box.currentStyle.height);
console.log(box.currentStyle["height"]);

    1
    2

封裝一個兼容的獲取樣式的方法。

//tag是標簽，attr是需要獲取的屬性。
function getStyle(tag,attr){
    if(tag.currentStyle[attr]){//先判斷有沒有這個屬性，沒有是undefined，不會報錯。
        return tag.currentStyle[attr];
    }else{
    return getComputedStyle(tag,null)[attr];
}

    1
    2
    3
    4
    5
    6
    7

同時設置標簽的多個樣式

box.style.cssText="width:10px;height:100px;background-color:red";//不常用

    1

文本的設置：
box.innerHTML 可以獲取和設置某個標簽內的文本和內部標簽

box.innerHTML="中午吃<span>我是sapn的內容</span>"

    1

通過box.innerText可以獲取不含內部標簽的文本，ie支持
其他瀏覽器支持box.textContent屬性，作用與innerText相同

標簽的獲取方式
document.getElementById(“id名”) 根據id獲取
document.getElementsByTagName(“標簽名”) 根據標簽名獲取
document.getElementsByClassName(“類名”) 根據類名獲取 ie低版本不支持

封裝根據類名獲取頁面元素的函數(性能不高)

這里寫圖片描述

節點
dom – 文檔對象模型 document是dom中的頂級對象
dom把html頁面看作一個樹結構
dom樹中的每一個部分我們都稱為節點。

這里寫圖片描述

節點訪問關系
dom中提供了一套訪問關系，稱為節點訪問關系

父子訪問關系：
通過parentNode可以訪問某個節點的父節點
通過childNodes可以得到某個節點的所有子節點，包含文本節點（空格和換行）
通過children可以得到某個節點中的所有元素子節點（不是標准方法，但是所有瀏覽器都支持，可放心使用）。
獲取子節點
node.firstChild 表示第一個子節點（包含文本節點）
node.lastChild 最后一個子節點（包含文本節點）

獲取元素子節點：ie低版本不支持
node.firstElementChild 第一個元素子節點
node.lastElementChild 最后一個元素子節點

兄弟訪問關系：

這里寫圖片描述
不加element的都支持，加上的ie低版本

添加子節點
從后面添加：節點.appendChild(傳入的節點); 添加的新節點其實是移動過來的。
從前面添加：節點.insertBefore(要插入的節點 , 在誰之前); 將節點插入到子節點中指定節點的前面。
注意：一定是父節點去調用方法，操作的都是子節點

這里寫圖片描述

創建節點的方式
節點.innerHTML
document.write(“
”)

第三種創建方式document.createElement(“標簽名”)
document不能更換

var newbox=document.createElement("標簽名")；
box.appendChild(newbox);

刪除節點
父節點.removeChild(子節點)
調用的對象是父節點、
父子訪問關系
訪問父元素：節點.parentNode
訪問子元素：
1、 全部子節點 childNodes 全部子節點 （包含文本節點）
2、 全部元素子節點 children 全部的元素子節點（標簽）
總結：
訪問某個子節點：
1、 第一個子節點 firstChild （有可能是文本節點）
2、 第一個元素子節點 firstElementChild ie低版本不支持
3、 最后一個子節點 lastChild （有可能是文本節點）
4、 最后一個元素子節點 lastElementChild ie低版本不支持

兄弟訪問關系：
1、 前一個兄弟節點 previousSibling （有可能是文本節點）
5、 前一個兄弟元素節點 previousElementSibling ie低版本不支持
6、 后一個兄弟節點 nextSibling （有可能是文本節點）
7、 后一個兄弟元素節點 nextElementSibling ie低版本不支持

onkeyup 鍵盤上的鍵抬起來觸發事件
克隆節點
節點.cloneNode(參數)

var box=document.getElementById("box");
var newNode=box.cloneNode(true);//如果傳入的是true那么就是標簽和內容一起復制。
var newNode=box.cloneNode(false);//如果傳入的false那么就是只克隆標簽不再復制內容。

    1
    2
    3

隨機數計算
Math.random() [0,1)能取到0但是不能取到1；
如果想要獲取任意兩個數之間的隨機數：
例如：236-463 先計算差，然后用Math.random()*差 + 第一個數

var ran=Math.random()*(463-236)+236;

    1

ondblclick 雙擊觸發

替換節點
replaceChild();
替換節點：父節點.replaceChild(新節點，要替換掉的子節點);

//創建一個新標簽
var newp=document.createElement("p");
newp.innerHTML="我是新的p標簽";
box.replaceChild(newp,p);
//replaceChild()方法的第一個參數是新的參數，第二個是需要被替換的參數；
//替換掉的參數並沒有刪除，只是不顯示，但是還是存在，可以繼續使用。
box.appendChild(p);

    1
    2
    3
    4
    5
    6
    7

節點的類型
節點的類型分為元素節點，文本節點，屬性節點。
節點的三大屬性

三大節點的詳解

每個節點都有三個屬性
nodeType 用於獲取節點的類型
獲取結果是一個數值：
1為元素節點 2為屬性節點 3為文本節點

nodeName 節點名
元素節點的節點名就是標簽名

nodeValue 節點值
元素節點沒有節點值，值為null,文本節點的節點值就是文本，屬性節點的節點值就是該屬性值。

屬性的操作
當我們在行內設置自定義屬性時，無法通過標簽.屬性的形式直接獲取
使用節點.getAttribute(“屬性名”)獲取屬性
使用節點.setAttribute(“屬性名”,”新的屬性值”)設置屬性
節點.removeAttribute(“屬性名”) 可以移出指定屬性

注意：通過上面的方式獲取的結果只是屬性，而不是屬性節點
想要獲取屬性節點使用 節點.getAttributeNode(“屬性名”);

 <td id="john" name="myname">John</td>   
 var john=document.getElementById("john").getAttributeNode("name");//這樣獲取到的就是一個屬性節點。
 hohn.nodeValue=節點.getAttrbute("name");

    1
    2
    3
    4

獲取到的節點的節點值相當於getAttribute獲取的值。

所以我們一般不是用屬性節點進行操作。