20180719- JavaScript-Dom基礎

 

如何獲取一個元素

如何訪問一個元素的樣式

如何設置和刪除屬性

 

1、掌握基本的DOM查找方法

        doucument.getElementById()

        doucument.getElementByTagName()

      語法:

            doucument.getElementById("id")

            doucument.getElementByTagName("tag")

      功能:

             返回對擁有指定ID的第一個對象的引用。

             返回一個對所有tag標籤引用的集合。

      返回值:

             DOM對象。

             數組。

      說明:

             id爲DOM元素上id屬性的值。

             tag爲要獲取的標籤名稱。

         //doucument.getElementById()
          <div class="box"  id="box">
                 元素
          </div>
          <script>
              //獲取id爲box的這個元素
              var box=document.getElementById("box");
              console.log(box);
              //下面三行是結果
              //<div class="box" id="box">
              //        元素
              // </div>
          </script>
          <!--ul#list1>li*3  快捷方式是啥-->
          <ul id="list1">
              <li>前端開發</li>
              <li>服務器端開發</li>
              <li>UI設計</li>
          </ul>
          <ol>
              <li>JavaScript原生</li>
              <li>JavaScript框架</li>
          </ol>
          <script>
              //獲取頁面中所有的li
              var lis=document.getElementsByTagName("li");
              console.log(lis.length);//5
              //獲取id爲list1下的所有li
              var lis2=document.getElementById("list1").getElementsByTagName("li");
              console.log(lis2.length);//3
          </script>

2、掌握如何設置DOM元素的樣式

      語法:

           ele.style.styleName=styleValue

      功能:

             設置ele元素的CSS樣式。

      說明:

             ①ele爲要設置樣式的DOM對象

             ②styleName爲要設置的樣式名稱

                    不能使用“-”連字符形式font-size 使用駝峯命名形式fontSize

             ③styleValue未設置的樣式值

 

掌握innerHTML屬性的應用

-獲取和設置標籤之間的文本和html內容

      語法:

           ele.innerHTML

      功能:

             設置ele元素開始和結束標籤之間的HTML。

      語法:

           ele.innerHTML=“html”

      功能:

             設置ele元素開始和結束標籤之間的HTML內容爲html。

 

掌握className屬性的應用

動態添加class替換元素本身的class

ele.className是重新設置類,替換元素本身的class

如果元素有2個以上的class屬性值,那麼獲取這個元素的className屬性時,

會將它的class屬性值都打印出來

      語法:

           ele.className

      功能:

             返回ele元素的class屬性。

      語法:

           ele.className=“cls”

      功能:

             設置ele元素的class屬性爲cls

掌握如何在DOM元素上添加刪除獲取屬性

      語法:

           ele.getAttribute("attribute")

      功能:

             獲取ele元素的attribute屬性。

      說明:

             ①ele是要操作的DOM對象

             ②attribute是要獲取的HTML屬性(如:id,type)

無法獲取class屬性

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章