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

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

DOM 以樹結(jié)構(gòu)表達 HTML 文檔。

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

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

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

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

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

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

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

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

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

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

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

語法

  var element = document.querySelector(selectors);

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

例子：

  

    

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


復(fù)制代碼

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

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

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

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

object.getAttribute(attribute)

setAttribute(attribute,value)

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

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

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

firstChild和lastChild屬性

firstChild 等價于 node.childNodes[0]

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

元素節(jié)點的nodeType屬性值是1

屬性節(jié)點的nodeType屬性值是2

文本節(jié)點的nodeType屬性值是3

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

nodeValue 返回或設(shè)置指定節(jié)點的節(jié)點值。 標簽---null,屬性--屬性的值,文本--文本內(nèi)容

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

我是p里面的value

怎獲取p標簽里的文本？

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

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

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

標簽也可以生成

缺點： 違背了“行為與表現(xiàn)分離”的原則

...

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

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

新標簽

innerHTML 會根據(jù)指定的值創(chuàng)建新的DOM樹，然后用這個DOM樹完全替換調(diào)用元素的所有子節(jié)點。

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

//創(chuàng)建元素 這個方法只能創(chuàng)建元素節(jié)點，這個節(jié)點是空白的。

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

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

document.body.appendChild(div);

創(chuàng)建文本節(jié)點

document.createTextNode("Hellow world")

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

parentElement.inserBefore(newElement, targetElement)

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

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

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

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

element.style

element.style.fontFamily

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

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

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

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

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

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

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

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

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

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

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

總結(jié):如果使用innerText主要是設(shè)置文本的,設(shè)置標簽內(nèi)容,是沒有標簽的效果的

//總結(jié):innerHTML是可以設(shè)置文本內(nèi)容 //

總結(jié):innerHTML主要的作用是在標簽中設(shè)置新的html標簽內(nèi)容,是有標簽效果的

//總結(jié):想要設(shè)置標簽內(nèi)容,使用innerHTML,想要設(shè)置文本內(nèi)容,innerText或者textContent,或者innerHTML,推薦用innerHTML

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

//innerHTML才是真正的獲取標簽中間的所有內(nèi)容*

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

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

?

,應(yīng)該使用offset系列來獲取

/*

*

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

* offsetWidth:元素的寬,有邊框

* offsetHeight:元素的高,有邊框

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

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

*

* scroll系列:卷曲出去的值

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

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

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

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

*

* client系列:可視區(qū)域

* clientWidth:可視區(qū)域的寬(沒有邊框),邊框內(nèi)部的寬度

* clientHeight:可視區(qū)域的高(沒有邊框),邊框內(nèi)部的高度

* clientLeft:左邊邊框的寬度

*clientTop :上面的邊框的寬度

沒有脫離文檔流:

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

脫離文檔流了

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

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

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

1.jQuery對象屬于js的數(shù)組；

2.jQuery對象是通過jQuery包裝的DOM對象后產(chǎn)生的;

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

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

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

jQuery對象轉(zhuǎn)換成DOM對象：

var $li = $(“l(fā)i”);
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)
 
DOM對象轉(zhuǎn)jquery對象
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉(zhuǎn)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");   //在原來的基礎(chǔ)上再給我加上名為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() //不傳參數(shù)，只有顯示功能，無動畫

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

? //callback 回調(diào)函數(shù) 動畫執(zhí)行完執(zhí)行該函數(shù)

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({}).

? 一個一個挨個執(zhí)行

?

添加節(jié)點

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

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

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

 

清空一個元素的內(nèi)容

$("div").empty();     $("div").html(" ");//這個會引發(fā)內(nèi)存泄漏

移除一個元素              

$("div").remove();

克隆一個元素

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

$("
") 創(chuàng)建了一個li

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

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

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

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

區(qū)別：html方法會識別html標簽，text方法會那內(nèi)容直接當成字符串，并不會識別html標簽。

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

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

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

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

可以直接操作

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

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

對應(yīng)的事件

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

mounted 將數(shù)據(jù)已經(jīng)裝載到了DOM之上,可以操作DOM

參考博客