DOM元素的获取

DOM对象 

DOM 全称"Document Object Model" 文档对象模型

DOM中有很多方法，可以通过他提供的方法来操作一个页面中的某个元素，

如 ，改变这个元素的颜色，点击这个元素实现的某些效果

DOM操作，可以简单理解成"元素操作"；

DOM结构

DOM 采用的是"树" 形结构，用树节点 形式来表示页面中的每一个 元素

每一个元素都是一个节点，每一个节点就是一个对象，即，在操作对象的时候，其实就是把这个元素看成是一个对象，然后使用这个对象的属性和方法来进行相关操作
节点类型
常见的三种DOM 节点类型 ,可用node Type 属性来判断一个节点的类型 值是一个数字，
元素节点，1
属性节点，2
文本节点，3
节点不一定等于元素，因为节点 跟元素是不一样的概念，节点包括元素

节点类型 的，三个注意点
1. 一个元素就是一个节点，这个节点称之为 "元素节点"
2. 属性节点 和 文本节点，表面看去是元素节点的一部分，但实际他们是独立
    的节点，并不属于元素节点
3. 只有元素节点才可拥有子节点，属性节点 和 文本节点都 无法拥有子节点
<div id="wrapper">这是一个网站</div>
元素节点  ：div
属性节点  ： id
文本节点  ： 这是一个网站
获取元素节点获取元素节点 （注：不是文本节点，和 属性节点 ）
getElementById()
  getElementsByTagName()
  getElementsByClassName()
  querySelector() 和 querySelectorAll()
  getElementsByName()
  document.title  和 document.body
getElementById()语法：
document.getElementById("id名"); //获取1个元素
举例  window.onload = function () {
      var oDiv1 = document.getElementById("div1");
      oDiv1.style.color = "red";
      oDiv1.style.fontWeight = "bold";
    }
  </script>
  <div id="div1">这是一个网站</div>
getElementsByTagName()
语法：
document.getElementsByTagName("标签名")
他是一个集合，获取多个元素，也可以说是获取的是一个类数组（伪数组）因为他不是真数组，类数组只能用到两点，length属性 和 下标形式


 window.onload = function () {
      var oUl = document.getElementById("list");
      var oLi = oUl.getElementsByTagName("li");
      oLi[2].style.color = "green";
    }
  <ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
  </ul>

    window.onload = function () {
      var arr = ["HTML", "CSS", "jQuery", "JavaScript"]
      var oUl = document.getElementById("list");
      var oLi = oUl.getElementsByTagName("li");
      for (var i = 0; i < oLi.length; i++) {
        oLi[i].innerHTML = arr[i];
        oLi[i].style.color = "red";
      }
    }

  <ul id="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
getElementById() 和 getElementsByTagName() 的3个区别
1. getElementById() 获取的是一个元素，而getElementsByTagName()获取的是多个元素（伪数组）
2.getElementById() 前面只可以接document，也就是document.getElementById（）| getElementsByTagName() 前面不仅可以接document, 还可以接其他DOM对象
3. getElementById() 不可以操作动态创建的DOM元素，而getElementsByTagName()可以操作动态创建的DOM元素
  //getElementsByTagName();可以创建动态创建的dome
    window.onload = function () {
      document.body.innerHTML =
        "<input type='button' value='按钮';/><input type='button' value='按钮';/><input type='button' value='按钮';/>"
      var oBtn = document.getElementsByTagName("input");
      oBtn[0].onclick = function () {
        alert("表单元素共有:" + oBtn.length + "个");
      }
    }

    //getElementById(); 不可以操作动态创建的DOM
    window.onload = function () {
      document.body.innerHTML =
        "<input type='button' id='btn' value='按钮';/><input type='button' value='按钮';/><input type='button' value='按钮';/>"
      var oBtn = document.getElementById("btn");
      oBtn[0].onclick = function () {
        alert("表单元素共有:" + oBtn.length + "个");
      }
    }
getElementsByClassName() 
语法document.getElementsByClassName("类名")  //也是个复数，类数组



 window.onload = function () {
      var oUl = document.getElementById("list");
      var oSelect = oUl.getElementsByClassName("select");
      oSelect[1].style.color = "red";
      oSelect[1].style.fontWeight = "700";
    }

  <ul id="list">
    <li>HTML</li>
    <li class="select">CSS</li>
    <li>JavaScript</li>
    <li class="select">Vue.js</li>

 querySelector() 和 querySelectorAll()
语法：
document.querySelector（“选择器”）; //选取满足条件的第一个元素    
document.querySelectAll("选择器")    //选取满足条件的所有元素    因获取多个元素 所以也是一个类数组，可通过数组下标的形式来获取某个元素


 window.onload = function () {
var oSelect = document.querySelectorAll(".select");
      oSelect[1].style.color = "blue";
      oSelect[1].style.fontWeight = "700";
    }

  <ul id="list">
    <li>HTML</li>
    <li class="select">CSS</li>
    <li>JavaScript</li>
    <li class="select">Vue.js</li>
  </ul>


window.onload = function () {
      var oLi = document.querySelector("#list li:nth-child(3)");
      oLi.style.color = "pink";
      oLi.style.fontWeight = "700";
    }
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Vue.js</li>
  </ul>

getElementsByName()
语法document.getElementsByName("name名") //如果想通过name属性来获取表单元素 可以用这个方法
                                      获取的是一个类数组，所以可以使用数组下标形式，来准确的获取某一个元素
                                      只用于表单元素，一般只用于单选按钮和复选


    window.onload = function () {
      var oInput = document.getElementsByName("status");
      oInput[2].checked = true;//表示类数组中第三个元素的checked属性设置为true,也就是第三个单选按钮被选中
    }

  您最高学历：
  <label><input type="radio" name="status" value="本科" />本科</label>
  <label><input type="radio" name="status" value="博士" />博士</label>
  <label><input type="radio" name="status" value="硕士" />硕士</label>


window.onload = function () {
      var oInput = document.getElementsByName("fruit");
      for (var i = 0; i < oInput.length; i++) {
        oInput[i].checked = true;
      }
    }

  你喜欢的水果:
  <label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
  <label><input type="checkbox" name="fruit" value="梨子" />梨子</label>
  <label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>

document.title  和 document.body
  window.onload = function () {
      document.title = "这是一个网站";
      document.body.innerHTML = "<strong style='color:red'>欢迎来到我的网站</strong>"
    }

posted @ 2020-12-21 14:20 沁莹阅读(349) 评论(0) 收藏举报

刷新页面返回顶部

沁莹

DOM元素的获取

公告