JavaScript学习笔记(三）

DOM

DOM查找方法

语法：document.getElementById("id")
功能：返回对拥有指定ID的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值

  <div class="box" id="box">
        元素
  </div>    
  <script>
    var box = document.getElementById('box');
    console.log(box);
  </script>

语法：document.getElementByTagName("tag")
功能：返回一个对所有tab标签引用的集合
返回值：数组
说明：tag为要获取的标签的名称

  <div class="box">
    <ul id="list1">
      <li>前端开发</li>
      <li>服务器开发</li>
      <li>UI设计</li>
    </ul>
  </div>
  <script>
    var box = document.getElementsByTagName("li");//数组
 //获取id为list1下的所有li
    var lis2 = document.getElementById("list1").getElementsByTagName("li")
  </script>

给元素设置样式

语法：ele.style.styleName = styleValue
功能：设置ele元素的css样式
说明：
1.ele为要设置样式的DOM对象
2.styleName为要设置的样式名称，此样式名称不能使用例如font-size形式，需要使用驼峰形式fontSize
3.styleValue为设置的样式值

获取和设置HTML标签内容

语法：ele.innerHTML
功能：获取ele元素开始和结束标签之间的HTML
语法：ele.innnerHTML = “html”
功能：动态设置ele元素开始和结束标签之间的HTML内容为html

  <script src="index.js"></script>
  <div class="box" id="box" style="color: #03a9f4"></div>
  <ul id="list1">
    <li>前端开发</li>
    <li>服务器开发</li>
    <li>UI设计</li>
  </ul>
  <script>
    var list = document.getElementById("list1").getElementsByTagName("li");
    for (var i=0,len=list.length;i<len;i++) {
        console.log(list[i].innerHTML);
        list[i].innerHTML += '程序';
    }
  </script>

获取和设置ele元素的class属性

语法：ele.className
功能：获取ele元素的class属性
语法：ele.className = “cls”
功能：动态设置ele元素的class属性为cls

 <style>
    .current {background: #ffffff;color:#ff9800}
  </style>
  <div class="box" id="box" style="color: #03a9f4"></div>
  <ul id="list1">
    <li>前端开发</li>
    <li>服务器开发</li>
    <li>UI设计</li>
  </ul>
  <script>
    var list = document.getElementById("list1").getElementsByTagName("li");
    for (var i=0,len=list.length;i<len;i++) {
        //动态给内容设置css
        list[1].className = "current";
    }

获取设置移除HTML属性

语法：ele.getAttibute("attribute")
功能：获取ele元素的自定义attribute属性
说明：ele是要操作的dom对象；attribute是要获取的html属性

语法：ele.setAttibute("attribute"，value)
功能：设置ele元素的attribute属性

语法：ele.removeAttibute("attribute")
功能：删除ele元素的attribute属性

 <p id="text" class="text" align="center" data-type="title">文本</p>
  <script>
   //获取p标签属性
    var p = document.getElementById("text");
    console.log(p.id);//结果为text
    console.log(p.algin);//结果为center
    //除了class不能直接点语法取出，其他标签属性都可以点语法直接取出
    console.log(p.className);
    //取出标签的自定义属性
    console.log(p.getAttribute("data-type"));
    //设置属性
    p.setAttribute("data-color","red");
    //删除属性
    p.removeAttribute("align");
  </script>