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属性