<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          javascript對dom的操作總匯,js創建,更新,添加,刪除DOM的方法

          時間:?2017-11-08閱讀:?4012標簽:?js知識

          HTML文檔在瀏覽器解析后,會成為一種樹形結構,我們需要改變它的結構,就需要通過js來對dom節點進行操作。dom節點(Node)通常對應的是一個標題,文本,或者html屬性,都有一個nodeType來標示他的類型:

          值 nodeType名稱 
           1  Element  元素
           2  Attribute  屬性
           3  Text  文本
          nodeType表示Node的類型,它是一個整數,上面列表只顯示了3個我們比較常用的,可以通過nodeType來判斷節點是什么類型,例如:
          <script>
             	console.log(document.getElementsByTagName('meta')[0].nodeType);//輸出1,代表頁面中第一個meta是元素類型
             </script>


          JS動態創建Dom

          createElement()方法可創建元素節點,此方法可返回一個 Element 對象。例如我們需要在body下創建一個按鈕元素button,方法如下:

          <script type="text/javascript"> 
             var input = document.createElement("input");  
             input.type = "button";  
             input.value = "創建一個按鈕";  
             document.body.appendChild(input);  
           </script>

          Dom的獲取

          1.直接獲取

          通過id來獲取,由于ID在HTML文檔中是唯一的,可以直接定位唯一的一個DOM節點。

          var test=document.getElementById('id')

          通過節點名來獲取,由于文檔中存在多個名稱,所以返回的是一組節點。

          var test= document.getElementsByTagName('div') 

          通過類名來獲取。

          var test= document.getElementsByClassName('class') //返回一組有該類的所有節點。

          var test=document.querySelector(".class")//返回當前文檔中第一個類名為 " class  " 的節點 ,里面參數也可以用id如#id。

          var test= document.querySelectorAll("div.class, div.other")//返回一組文檔中div的class為"class"或者 "other"的節點。

          注意:IE8及以下版本是不支持querySelector和querySelectorAll的。

          2.通過父節點獲取子節點

          為了精確地選擇DOM,我們可以先定位父節點,再從父節點開始選擇子節點,以縮小范圍。

          var ch = test.children;//獲取節點test下的所有直屬的節點集合

          var first = test.firstElementChild; // 獲取節點test下第一個節點

          var last = test.lastElementChild;//獲取節點test下第一個節點

          3.通過獲取父節點,和兄弟節點

          var parent =  test.parentElement;//獲取父節點

          var next =  test.nextElementSibling; //獲取下一個兄弟節點

          var pre =  test.previousElementSibling;//上一個兄弟節點

          4.注意

          平時我們還可能會看到用這些來獲取,比如parentNode,childNodes,firstChild,lastChild,nextSibling,previousSibling等,需要注意的是:它們返回元素集合,包括元素節點,屬性節點,文本節點。而我們上面主要是獲取元素節點。


          Dom的修改、刪除

          ele.appendChild(test); // 添加子元素 

          ele.replaceChild(test,  test1);  // 替換子元素 

          parent.insertBefore(new, reference);  // 插入子元素 ,意思是在parent的子節點reference前插入new。

          ele.cloneNode(true) //克隆元素。該參數為true,代表被復制的節點是否包括原節點的所有屬性和子節點

          ele.removeChild(test); //刪除子元素   

          刪除子元素需要注意的是:當使用索引來刪除的時候,刪除前面的,后面的會出現找不到子元素的情況,如下:

          <div id="parent">
              <p>First</p>
              <p>Second</p>
          </div>
          <script>
           var parent = document.getElementById('parent');
           parent.removeChild(parent.children[0]);
           parent.removeChild(parent.children[1]); // 瀏覽器報錯,parent.children[1]不是一個有效的節點。
          </script>


          DOM的更新

          1.修改innerHTML和outerHTML屬性:
          它們不但可以修改一個DOM節點的文本內容,還可以直接通過HTML片段修改DOM節點內部的子樹。區別在于:outerHTML包含了直身,而innerHTML只更新它里面的所有元素。(注意的是:如果寫入的字符串是通過網絡拿到了,要注意對字符編碼來避免XSS攻擊。)
          2.修改innerText或textContent:

          它們只能修改Dom節點的文本內容,如果里面有標題元素,會被自動編碼。它們的區別在于:innerText不返回隱藏元素的文本,而textContent返回所有文本。(注意IE<9不支持textContent)。

          3.修改元素的CSS

          DOM節點的style屬性對應所有的CSS,可以直接獲取或設置。但是注意的是CSS允許font-size,但它并非JavaScript有效的屬性名,所以需改寫為駝峰式命名fontSize,例如:

          var p = document.getElementById('p-id');
          // 設置CSS:
          p.style.color = '#ff0000';
          p.style.fontSize = '20px';
          p.style.paddingTop = '2em';
          
          4.元素的屬性的修改操作

          修改元素的屬性也是經常需要的操作。

          var a = test.getAttribute('class'); //獲取test元素的class屬性

          a.setAttribute('class', 'clname'); //把class屬性值修改為clname

          test.hasAttribute('class'); //判斷test元素是否存在clas的屬性

          test.removeAttribute('class'); //移除test中的class屬性    



          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/66

          javascript中什么是句柄?

          一個句柄是指使用的一個唯一的整數值,即一個4字節(64位程序中為8字節)長的數值,來標識應用程序中的不同對象和同類中的不同的實例。

          javascript不可變性是什么?

          不可變性即某個變量在進行了某個操作之后,其本身沒有發生變化,比如對于字符串而言,對字符串的任何操作都會改變字符串本身的值,而是在字符串的基礎上復制出來一個然后再改變,這樣我們就說是不可變的

          為什么javascript不起作用?

          JavaScript是一種屬于網絡的腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

          javascript怎么判斷按鈕被點擊?

          JavaScript可以通過Event對象的target事件或srcElement(IE瀏覽器支持)來判斷按鈕是否被點擊。Event對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

          javascript由幾部分組成?

          JavaScript有三部分組成。分別為核心(ECMAScript) 、文檔對象模型(DOM)、瀏覽器對象模型(BOM)。這三部分分別描述了該語言的語法和基本對象、處理網頁內容的方法和接口、與瀏覽器進行交互的方法和接口。

          Js輸出方式有哪些?

          在編寫JavaScript代碼的時候, 一定要記住每一句代碼后面都需要添加一個分號, 并且這個分號必須是英文的分號,我們會發現有時候不寫分號程序也能夠運行, 這里并不是因為不需要分號, 而是瀏覽器自動幫助我們添加了分號

          7個常見的 JavaScript 測驗及解答

          我相信學習新事物并評估我們所知的東西對自己的進步非常有用,可以避免了我們覺得自己的知識過時的情況。在本文中,我將介紹一些常見的 JavaScript 知識。請享用!

          Js中constructor指向問題

          首先用一個例子指出來constructor存在形式。由上面的代碼我們總結出結論1:上面的代碼在控制臺可以看出constructor是指向構造器Fruit的引用。這個地方就有點奇怪了。這個constructor到底指向的是那個實例的構造器?

          javascript難點是什么?

          javascript難點是什么?下面本篇文章就來給大家介紹一下10個JavaScript難點,感興趣的小伙伴們可以參考一下,希望對大家有所幫助。立即執行函數,即Immediately Invoked Function Expression (IIFE),正如它的名字

          Js如何獲取ul中li的個數?

          javascript如何獲取ul中li的個數?下面本篇文章就來給大家介紹一下使用javascript獲取ul中li個數的方法,希望對大家有所幫助。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网