摘要：例子第三級的同級的第二個獲取元素復制代碼兩個都包含的元素，一個在文檔樹的前面，但是它在第三級，另一個在文檔樹的后面，但它在第一級，通過獲取元素時，它通過深度優先搜索，拿到文檔樹前面的第三級的元素。對象就是通過包裝對象后產生的對象。

DOM(文檔對象模型)是針對HTML和XML文檔的一個API(應用程序編程接口)。DOM描繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分。

DOM 以樹結構表達 HTML 文檔。

根據id屬性的值獲取元素,返回來的是一個元素對象。 還有注意因為js區分大小寫，所以寫這個元素不能寫錯了，否者都得不到正確的結果。

document.getElementById("id屬性的值");

根據標簽名字獲取元素,返回來的是一個偽數組,里面保存了多個的DOM對象

document.getElementsByTagName("標簽名字");

返回的 HTML集合是動態的, 意味著它可以自動更新自己來保持和 DOM 樹的同步而不用再次調用document.getElementsByTagName("標簽名字");

*document.getElementsByClassName("類樣式的名字")
* 根據選擇器獲取元素,返回來的是一個偽數組*

document.getElementsByName("name屬性的值")

根據name屬性的值獲取元素,返回來的是一個偽數組,里面保存了多個的DOM對象

根據選擇器獲取元素,返回來的是一個元素對象

document.querySelector("選擇器的名字");

document.querySelector`返回第一個匹配的元素，如果沒有匹配的元素，則返回 null

語法

  var element = document.querySelector(selectors);

注意，由于返回的是第一個匹配的元素，這個api使用的深度優先搜索來獲取元素。

例子：

  

    

      第三級的span    
    
  
  
            
    同級的第二個div
  
  


復制代碼

兩個class都包含“test”的元素，一個在文檔樹的前面，但是它在第三級，另一個在文檔樹的后面，但它在第一級，通過querySelector獲取元素時，它通過深度優先搜索，拿到文檔樹前面的第三級的元素。

根據選擇器獲取元素,返回來的是一個偽數組,里面保存了多個的DOM對象

querySelectorAll()方法接受的參數，也是一個css選擇器，返回的是所有匹配到的元素。返回的是一個NodeLIst的實例。

document.querySelectorAll("選擇器的名字")

object.getAttribute(attribute)

setAttribute(attribute,value)

getAttribute()和setAttribute()方法不屬于document對象，所以不能通過document對象調用，它只能通過元素節點對象調用。

這里有一個細節：通過setAttribute對文檔做出修改之后，在通過瀏覽器查看源代碼時看到的仍將是改變前的屬性值，也就是說setAttribute做出的修改不會反映在文檔本身的源代碼里，這種“表里不一”的現象源自DOM的工作模式：先加載文檔的靜態內容，再動態刷新，動態刷新不影響文檔的靜態內容。這正是DOM的真正威力：對頁面的內容進行刷新卻不需要再瀏覽器里面刷新。

由childNodes屬性返回的數組包含所有類型的節點，而不僅是元素節點。 事實上，文檔里幾乎每一個東西都是一個節點，甚至連空格和換行都會被解釋為節點，而他們也包含在childNodes屬性返回的數組中.

firstChild和lastChild屬性

firstChild 等價于 node.childNodes[0]

nodeType屬性共有12種可取值，但只有3中具有實用價值。

元素節點的nodeType屬性值是1

屬性節點的nodeType屬性值是2

文本節點的nodeType屬性值是3

nodeName 返回當前節點的節點名稱 節點的名字:大寫的標簽--標簽,小寫的屬性名---屬性,#text---文本

nodeValue 返回或設置指定節點的節點值。 標簽---null,屬性--屬性的值,文本--文本內容

ps: 對于元素節點nodeName 中保存的始終是元素的標簽名 大寫的標簽--標簽， nodeValue保存的值始終是NULL

我是p里面的value

怎獲取p標簽里的文本？

document.querySelector("p").childNodes(0).nodeValue

ps: 在編寫DOM腳本時，你會理所當然的認為某個節點肯定是一個元素節點，這是一種相當常見的錯誤。如果沒有100%的把握，就一定要檢查nodeType屬性值。有很多DOM方法只能用于元素節點，如果用在文本節點身上，就會出錯。

document.write("標簽的代碼及內容");
document.write(‘新設置的內容

標簽也可以生成

缺點： 違背了“行為與表現分離”的原則

...

及支持讀取，也支持寫入，它不僅可以用來讀取HTML內容，還可以用它把HTML內容寫入元素。

對象.innerHTML="標簽及代碼";
var box = document.getElementById("box");
box.innerHTML = "新內容

新標簽

innerHTML 會根據指定的值創建新的DOM樹，然后用這個DOM樹完全替換調用元素的所有子節點。

document.createElement("標簽的名字");

//創建元素 這個方法只能創建元素節點，這個節點是空白的。

//document.createElement("標簽名字"); 對象 //把元素追加到父級元素中

var div = document.createElement("div");

document.body.appendChild(div);

創建文本節點

document.createTextNode("Hellow world")

在已有元素前插入一個新元素

parentElement.inserBefore(newElement, targetElement)

(1)新元素: 你想插入的元素 (newELement)

(2)目標元素：你想把這個新元素插入到哪個元素(targetElement)之前

(3)父元素：目標元素的父元素(parentElement)

文檔中的每一個元素都是一個對象，每一個對象都有各種各樣的屬性。 每個元素節點都有一個style屬性。 style屬性包含著元素的樣式，查詢這個屬性將返回一個對象而不是一個簡單的字符串。樣式都存放在這個style對象里。

element.style

element.style.fontFamily

當你需要引用一個中間帶減號的css屬性時，DOM要求你用駝峰命名法。 css屬性font-family 用fontFamily

element.style.border = "1px solid red"

要確定某個元素的計算樣式(包括應用給它的所有css規則)，可以用這個方法

最重要的一條是要記住所有計算的樣式都只是可讀的；不能修改計算后樣式對象的css屬性。

window.getComputedStyle():可以獲取當前元素所有最終使用的CSS屬性值。

1: window.getComputedStyle("元素", "偽類");

這個方法接受兩個參數：要取得計算樣式的元素和一個偽元素字符串（例如“:before”） 。如果不需要偽元素信息，第二個參數可以是null。也可以通過document.defaultView.getComputedStyle(“元素”, “偽類”);來使用

1: var ele = document.getElementById("ele");

2: var styles = window.getComputedStyle(ele,null);

3: styles.color; //獲取顏色

可以通過style.length來查看瀏覽器默認樣式的個數。IE6-8不支持該方法，需要使用后面的方法。對于Firefox和Safari，會把顏色轉換成rgb格式。

總結:如果使用innerText主要是設置文本的,設置標簽內容,是沒有標簽的效果的

//總結:innerHTML是可以設置文本內容 //

總結:innerHTML主要的作用是在標簽中設置新的html標簽內容,是有標簽效果的

//總結:想要設置標簽內容,使用innerHTML,想要設置文本內容,innerText或者textContent,或者innerHTML,推薦用innerHTML

//獲取的時候: //innerText可以獲取標簽中間的文本內容,但是標簽中如果還有標簽,那么最里面的標簽的文本內容也能獲取.---獲取不到標簽的,文本可以獲取

//innerHTML才是真正的獲取標簽中間的所有內容*

結論: //如果想要(獲取)標簽及內容,使用innerHTML //如果想要設置標簽,使用innerHTML //想要設置文本,用innerText,或者innerHTML,或者textContent*

ps: innerText 成對的標簽都可以用這個改變值

?

,應該使用offset系列來獲取

/*

*

* offset系列:獲取元素的寬,高,left,top, offsetParent

* offsetWidth:元素的寬,有邊框

* offsetHeight:元素的高,有邊框

* offsetLeft:元素距離左邊位置的值

* offsetTop:元素距離上面位置的值

*

* scroll系列:卷曲出去的值

* scrollLeft:向左卷曲出去的距離

* scrollTop:向上卷曲出去的距離

* scrollWidth:元素中內容的實際的寬(如果內容很少,沒有內容,元素自身的寬),沒有邊框

* scrollHeight:元素中內容的實際的高(如果內容很少或者沒有內容,元素自身的高),沒有邊框

*

* client系列:可視區域

* clientWidth:可視區域的寬(沒有邊框),邊框內部的寬度

* clientHeight:可視區域的高(沒有邊框),邊框內部的高度

* clientLeft:左邊邊框的寬度

*clientTop :上面的邊框的寬度

沒有脫離文檔流:

offsetLeft:父級元素margin+父級元素padding+父級元素的border+自己的margin

脫離文檔流了

主要是自己的left和自己的margin

1. DOM對象：使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2. jQuery對象：jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（偽數組））
4. DOM``對象與jQuery對象的方法不能混用。

· jquery對象就是通過jQuery包裝DOM對象后產生的對象。jQuery對象是jQuery獨有的，其可以使用jQuery里的方法，但是不能使用DOM的方法;反過來Dom對象也不能使用jquery的方法

1.jQuery對象屬于js的數組；

2.jQuery對象是通過jQuery包裝的DOM對象后產生的;

3.jQuery對象不能使用DOM對象的方法和屬性

4.DOM對象不能使用jQuery對象的方法和屬性

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉jQuery對象

jQuery對象轉換成DOM對象：

var $li = $(“li”);
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)
 
DOM對象轉jquery對象
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉jQuery對象

$("li").css({//對象 所以可以添加多個樣式

"background-color","fff";

"color","rga(0,0,0)";

//

});

 

addClass(name);

//給所有的div添加one的樣式

$("div").addClass("one");

removeClass();

//移除div中one的樣式類名

$("div").removeClass("one");

$("div").hasClass("one"); 

判斷div是否有one的樣式

 

 

$(function(){

$("input").eq(0).click(function(){

$("li").addClass("bigger");   //在原來的基礎上再給我加上名為bigger的一個類。

});

})

$("li").removeClass("bigger")   //移除一個名為bigger的css類.

         hasClass("類名")  // 判斷類返回true，fasle；

         toggleClass("類名")  //切換類

 

    /*js原生用getAttribute("樣式名")獲得樣式屬性 setAttribute("樣式名","樣式屬性")*/

$("img").attr("attr","xx值")  

({

    "attr":"xx";

    "attr":"xx";

    "attr":"xx";

})

也可以獲得樣式的值

/*對于返回布爾值的屬性  用prop*/

show() //不傳參數，只有顯示功能，無動畫

show([speed],[callback]) //speed動畫持續的時間 單位毫秒

? //callback 回調函數 動畫執行完執行該函數

hide() 隱藏

slideUp() 上滑 slideDown() 下滑 slideToggle() 切換滑入滑出

淡入：fadeIn() 淡出fadeOut()

fadeTo(duration,opacity) duration時間 opacity 0~1 透明度

自定義動畫

animate(css屬性,[duration],[easing],[callback])

? {width:100%, {swing:秋千，搖擺速度

? heigth:100%} linear:勻速 }

動畫隊列 .animate({left:500px}).animate({top:500px}).animate({}).

? 一個一個挨個執行

?

添加節點

$("div").append($("p"));    添加到父節點里 最后面

$("p").appendTo($("div"));  把子元素添加到父元素里面（最后）  //preappend 添加到最前面

$("p").after($("p"));  兄弟元素后面   (before)

 

清空一個元素的內容

$("div").empty();     $("div").html(" ");//這個會引發內存泄漏

移除一個元素              

$("div").remove();

克隆一個元素

$("div").clone([bool]) //false:默認值 不會復制事件  true：會復制事件

$("
") 創建了一個li

val方法用于設置和獲取表單元素的值，例如input、textarea的值

//設置值
$("#name").val(“張三”);
//獲取值
$("#name").val();
 

html方法相當于innerHTML text方法相當于innerText

//``設置內容
$(“div”).html(“這是一段內容”);
//``獲取內容
$(“div”).html()

區別：html方法會識別html標簽，text方法會那內容直接當成字符串，并不會識別html標簽。

救命稻草, 前端框架就是為了減少DOM操作，但是特定情況下，也給你留了后門

在指定的元素上，添加ref="名稱A"

在獲取的地方加入 this.$refs.名稱A

如果ref放在了原生DOM元素上，獲取的數據就是原生DOM對象

可以直接操作

如果ref放在了組件對象上，獲取的就是組件對象

1:獲取到DOM對象,通過this.$refs.sub.$el,進行操作

對應的事件

created 完成了數據的初始化，此時還未生成DOM，無法操作DOM

mounted 將數據已經裝載到了DOM之上,可以操作DOM

參考博客