DOM的相關(guān)操作

什么是DOM

DOM (document object model) 文檔對象模型诵叁，是W3C 組織推薦的處理可擴展標(biāo)準(zhǔn)語言的標(biāo)準(zhǔn)編程接口。是HTML和XML文檔的編程接口钦椭。DOM是獨于平臺和語言的接口存捺，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容抖僵、結(jié)構(gòu)和樣式。

認識 DOM

DOM可以將任何HTML描繪成一個由多層節(jié)點構(gòu)成的結(jié)構(gòu)。節(jié)點分為12種不同類型.每個節(jié)點都擁有各自的特點视搏、數(shù)據(jù)和方法，也與其他節(jié)點存在某種關(guān)系夕玩。節(jié)點之間的關(guān)系構(gòu)成了層次坤按，而所有頁面標(biāo)記則表現(xiàn)為一個以特定節(jié)點為根節(jié)點的樹形結(jié)構(gòu)。 (節(jié)點類型一共有12種)

HTML文檔可以說由節(jié)點構(gòu)成的集合盲厌，DOM節(jié)點:（常用的3種）

元素節(jié)點(Element)：上圖中<html>署照、<body>、<p>等都是元素節(jié)點吗浩，即標(biāo)簽建芙。
文本節(jié)點(text): 向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript懂扼、DOM禁荸、CSS等文本。
屬性節(jié)點(Attr): 元素屬性阀湿，如 <a> 標(biāo)簽的鏈接屬性赶熟。

DOM 操作

節(jié)點至少包括nodeType、nodeName陷嘴、nodeValue 三種基本屬性

nodeType 返回節(jié)點類型的常數(shù)值

元素節(jié)點            　　Node.ELEMENT_NODE(1)
屬性節(jié)點            　　Node.ATTRIBUTE_NODE(2)
文本節(jié)點            　　Node.TEXT_NODE(3)
CDATA節(jié)點             Node.CDATA_SECTION_NODE(4)
實體引用名稱節(jié)點    　　 Node.ENTRY_REFERENCE_NODE(5)
實體名稱節(jié)點        　　Node.ENTITY_NODE(6)
處理指令節(jié)點        　　Node.PROCESSING_INSTRUCTION_NODE(7)
注釋節(jié)點            　 Node.COMMENT_NODE(8)
文檔節(jié)點            　 Node.DOCUMENT_NODE(9)
文檔類型節(jié)點        　　Node.DOCUMENT_TYPE_NODE(10)
文檔片段節(jié)點        　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD聲明節(jié)點            Node.NOTATION_NODE(12)

console.log(Node.ELEMENT_NODE)  // 1

nodeName 返回該節(jié)點的大寫字母標(biāo)簽名

nodeValue 返回和設(shè)置當(dāng)前節(jié)點的值

    let span = document.getElementById("span")
    console.log(span.nodeName)
    console.log(span.nodeType)
    console.log(span.nodeValue)

獲取DOM節(jié)點

原生js獲取
- document.getElementById("id") // 通過id獲取單個標(biāo)簽
- document.getElementsByClassName("classname") // 返回帶有指定類名的NodeList映砖。
- document.getElementsByName("name") // 返回帶有指定名稱的NodeList。
- document.getElementsByTagName("tagname") // 通過標(biāo)簽名獲得 NodeList灾挨。
- document.getElementsByTagNameNS("d",title) // 返回帶有指定名稱和命名空間的所有元素的 NodeList邑退。xml
jquery 獲取

    var $p_dom=$("p");    // 獲取p節(jié)點
    $p_dom.attr("title"); // 輸出p節(jié)點的title屬性

    var $li_2=$("ul li:eq(1)");  // 獲取第2個li節(jié)點   
    $li_2.attr("title");         // 第2個li節(jié)點的title屬性
    $li_2.html();                // 第2個li節(jié)點的文本內(nèi)容

創(chuàng)建DOM節(jié)點/屬性

原生創(chuàng)建

    var div = document.createElement('div')           // 創(chuàng)建一個節(jié)點

    var id = document.createAttribute('id') // 創(chuàng)建一個指定名稱的屬性
    id.value = "hui"  
    document.getElementById("box").setAttributeNode(id)

    text = document.createTextNode("text");　　　//創(chuàng)建文本節(jié)點
    div.appendChild(text)
    document.body.appendChild(div)

jquery 創(chuàng)建

    $li1=$("<li></li>")                    // 創(chuàng)建元素節(jié)點
    $li1=$("<li>text</li>")                // 創(chuàng)建文本節(jié)點
    $li3=$("<li title='榴蓮'>榴蓮</li>");　 // 創(chuàng)建屬性節(jié)點

    $("ul").append($li3);   // 新建節(jié)點添加到DOM樹中  竹宋。append 添加dom節(jié)點

添加節(jié)點

原生添加

jQuery.insertBefore(要插入的節(jié)點，指定節(jié)點)
jQuery.appendChild(要添加的節(jié)點) 追加

      div.insertBefore(span,p)   // 將span插入到div中的p前面
      div.appendChild(span)      // span添加到div的最后面

jquery 添加

before() 和 insertBefore
after() 和 insertAfter()
prepend()地技、prependTo()
append()蜈七、appendTo()

組內(nèi)的區(qū)別：返回的jquery對象不同。

    var li = $("<li>被添加的元素</li>")
    $("#box").before(li) 
    li.insertBefore($("#box")) 

    $("#box").after(li)
    li.insertAfter($("#box"))

    $("#box").append(li)
    li.appendTo($("#box"))

    let b = $("#box").prepend(li)  // 返回的是$("#box")對象莫矗，其他組一樣
    let c =li.prependTo($("#box")) // 返回的是li對象 飒硅，其他組一樣其他組一樣
    b.css("background","red")   
    c.css("background","red")

刪除節(jié)點

原生刪除
- removeChild() // box.removeChild(p) box中刪除p元素

jquery刪除

remove()
empty()

    $span = $("span").remove("span[id='span']")  // 返回值為所有的span元素
    $("#box").empty()                            // 清空所有的內(nèi)容

節(jié)點的修改操作

原生
- cloneNode() 參數(shù)true 表示復(fù)制元素時也復(fù)制元素行為
- node.replaceChild(newnode,oldnode)

jQuery 操作

復(fù)制元素 clone() // 參數(shù)true 表示復(fù)制元素時也復(fù)制元素行為

包裹節(jié)點

wrap()
wrapAll()
wrapInner()

    $("p").wrap("<div></div>")       // 每個p標(biāo)簽外面都被一個div元素包裹，
    $("p").wrapAll("<div></div>")    // 所有的p標(biāo)簽都被包裹到一個div元素中
    $("p").wrapInner("<div></div>")  // 每個p標(biāo)簽包裹一個div元素趣苏，p元素中的內(nèi)容放在div中狡相。  和wrap相反

替換節(jié)點

repalcewith()
repalceAll()

    // div代替所有的p標(biāo)簽，寫法不同
    $("p").replaceWith($("<div>new</div>"))
    $("<div>new</div>").replaceAll("p")

查找節(jié)點(父節(jié)點食磕，子節(jié)點尽棕，兄弟節(jié)點等等)

原生
- childNodes
  childNodes 返回的是子節(jié)點的集合，是一個數(shù)組的格式彬伦。他會把換行和空格也當(dāng)成是節(jié)點信息滔悉。
- children
- firstChild
  - firstChild 瀏覽器解析的時候會把他當(dāng)換行和空格一起解析，其實你獲取的是第一個子節(jié)點单绑，只是這個子節(jié)點是一個換行或者是一個空格而已
- firstElementChild
- lastChild 和firstChild有一樣的問題
- lastElementChild
- parentNode (w3c的標(biāo)準(zhǔn)) parentElement (ie的標(biāo)準(zhǔn))
- offsetParent 獲取所有的父節(jié)點
- previousSibling回官，previousElementSibling 獲取上一個兄弟節(jié)點
  previousSibling 會匹配字符，包括換行和空格搂橙，而不是節(jié)點歉提。previousElementSibling則直接匹配節(jié)點。
- nextSibling区转，nextElementSibling 獲取下一個兄弟節(jié)點不同點和上面類似
jquery 查找
- jQuery.parent(selector) 獲取父節(jié)點
- jQuery.parents(selector) 獲取祖先元素
- jQuery.children(expr) 查找所有子元素苔巨，只會找到直接的孩子節(jié)點，不會返回所有子孫
- jQuery.contents() 查找下面的所有內(nèi)容废离，包括節(jié)點和文本侄泽。
- jQuery.prevAll() 查找所有之前的兄弟節(jié)點
- jQuery.next() 查找下一個兄弟節(jié)點，不是所有的兄弟節(jié)點
- jQuery.prev() 查找上一個兄弟節(jié)點蜻韭，不是所有的兄弟節(jié)點
- jQuery.nextAll() 查找所有之后的兄弟節(jié)點
- jQuery.siblings() 查找兄弟節(jié)點悼尾，不分前后
- jQuery.find(expr)
```
  $("p").find("span")等于$("p span") 跟jQuery.filter(expr)完全不一樣，jQuery.filter(expr)是從初始的   
```
- jquery.filter() 將匹配元素集合縮減為匹配指定選擇器的元素 // $("span").filter(":even") 或:odd

其他操作屬性及樣式肖方，文本操作

原生
- 元素的其他操作
  - element.id 設(shè)置或返回元素的 id闺魏。
  - element.className 設(shè)置或者返回元素的類名
  - element.tagName 返回元素的標(biāo)簽名(大寫)
  - element.style 設(shè)置或返回元素的樣式屬性,
  - element.clientHeight/clientWidth 返回內(nèi)容的可視高度/寬度（不包括邊框，邊距或滾動條）
  - element.offsetHeight/offsetWidth /offsetLeft/offsetTop 返回元素的高度/寬度/相對于父元素的左偏移/右偏移(包括邊框和填充,不包括邊距)
  - element.scrollHeight/scrollWidth/scrollLeft/scrollTop 返回整個元素的高度（包括帶滾動條的隱蔽的地方）/寬度/返回當(dāng)前視圖中的實際元素的左邊緣和左邊緣之間的距離/上邊緣的距離
- 文本操作
  - element.innerHTML 設(shè)置或者返回元素的內(nèi)容俯画，可包含節(jié)點中的子標(biāo)簽以及內(nèi)容
  - **element.innerText ** 設(shè)置或者返回元素的內(nèi)容析桥，不包含節(jié)點中的子標(biāo)簽以及內(nèi)容
  - element.value
- 屬性操作
  - element.createAttribute() 創(chuàng)建屬性
  - element.setAttributeNode() 修改指定屬性節(jié)點
  - element.setAttribute(attrName,attrValue) 把指定屬性設(shè)置或更改為指定值
  - element.getAttribute(para) 返回元素節(jié)點的指定屬性值
  - element.getAttributeNode(para) 返回指定的屬性節(jié)點
  - element.attributes 返回所有的屬性
  - node.hasAttributes()
  - element.hasAttribute(para) 如果元素擁有指定屬性，則返回true，否則返回 false烹骨。
  - element.removeAttribute() 從元素中移除指定屬性。
  - element.removeAttributeNode(attributenode) 方法用來刪除指定的屬性
jQuery
- 屬性操作
  - jQuery.attr("title") 獲取title屬性 attr("title","aaa") 設(shè)置屬性
  - jQuery.removeAttr("title") 刪除屬性
- 樣式操作
  - jQuery.addClass() 添加類名
  - jQuery.removeClass() 移除類名
  - jQuery.hasClass() 判斷是否存在某個類名
- 文本操作
  - jQuery.html() 獲取所有的內(nèi)容材泄，包括文本和子標(biāo)簽
  - jQuery.text() 只獲取元素的純文本內(nèi)容
  - jQuery.val() 設(shè)置和獲取元素的值

DOM 節(jié)點的相應(yīng)操作

DOM 節(jié)點的相應(yīng)操作

DOM的相關(guān)操作

什么是DOM

認識 DOM

HTML文檔可以說由節(jié)點構(gòu)成的集合盲厌，DOM節(jié)點:（常用的3種）

DOM 操作

節(jié)點至少包括nodeType、nodeName陷嘴、nodeValue 三種基本屬性

獲取DOM節(jié)點

創(chuàng)建DOM節(jié)點/屬性

添加節(jié)點

刪除節(jié)點

節(jié)點的修改操作

查找節(jié)點(父節(jié)點食磕，子節(jié)點尽棕，兄弟節(jié)點等等)

其他操作屬性及樣式肖方，文本操作

DOM 節(jié)點的相應(yīng)操作

DOM的相關(guān)操作

什么是DOM

認識 DOM

HTML文檔可以說由節(jié)點構(gòu)成的集合盲厌，DOM節(jié)點:（常用的3種）

DOM 操作

節(jié)點至少包括nodeType、nodeName陷嘴、nodeValue 三種基本屬性

獲取DOM節(jié)點

創(chuàng)建DOM節(jié)點/屬性

添加節(jié)點

刪除節(jié)點

節(jié)點的修改操作

查找節(jié)點(父節(jié)點食磕，子節(jié)點尽棕，兄弟節(jié)點 等等)

其他操作 屬性及樣式肖方，文本操作

查找節(jié)點(父節(jié)點食磕，子節(jié)點尽棕，兄弟節(jié)點等等)

其他操作屬性及樣式肖方，文本操作