JavaScript DOM 篇

DOM Document Object Model(文档对象模型)

如何获取页面元素

1.根据ID获取

getElementById(ID);

<body>
   <div id="card">
       黎明的那道光
   </div>
   <script>
       document.getElementById(card);
   </script>
</body>

console.dir()打印我们返回的元素对象，更好的查看里面的属性和方法

2.根据标签名获取

使用document.getElementsByTagName()可以返回带有指定标签名的集合

 <ul>
        <li>有一种悲伤</li>
        <li>北方的冬夜是否暖过上海的夏天</li>
        <li>不找了</li>
        <li>世间美好与你环环相扣</li>
    </ul>
    <script>
        //获取的是元素对象的集合，以伪数组的形式存储
        var lis=document.getElementsByTagName('li');
        console.log(lis);
　　　　  console.log(lis[0]);//获取第一个li
    </script>

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名')；

3.通过HTML5新增的方法获取

document.getElementsByClassName('类名')//根据类名返回元素对象集合

querySelector()返回指定选择器的第一个元素对象,注意里面的选择器需要加符号
querySelectorAll()返回指定选择器的所有元素对象

<div class="box">123</div>
   <div class="box">456</div>
   <script>
       var boxs=document.getElementsByClassName('box');
       console.log(boxs);
       //2.querySelector()返回指定选择器的第一个元素对象,注意里面的选择器需要加符号
       //3.querySelectorAll()返回指定选择器的所有元素对象
       var num=document.querySelector('.box');
       console.log(num);
   </script>

4.特殊元素获取（body 或html标签）

获取body document.body;

获取html document.documentElement;

事件三要素：

事件源，事件类型，事件处理程序

 <button id="btn">唐伯虎</button>
   <script>
       //实现点击按钮弹出对话框
       //1.事件源 事件被触发的对象 在此处为按钮
       var btn=document.getElementById('btn');
       //2.事件类型 如何触发这个时间 是鼠标点击 还是鼠标经过等等
       btn.onclick=function(){//实现了鼠标点击时弹出对话框点秋香
           alert('点秋香');
       }
   </script>

执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值程序）

js的DOM操作可以修改网页结构的内容，结构和样式，可以利用DOM操作元素来修改元素里面的内容，属性等

改变元素内容：

element.innerText 从起始位置到终止位置的内容，但他去除html的标签。同时空格和换行也会去掉

element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<body>
  <button>显示当前系统时间</button>
  <div>时间</div>
  <script>
      //实现点击按钮div里的文字变成当前时间
      //1.获取元素
      var btn=document.querySelector('button');
      var div=document.querySelector('div');
      //2.注册事件
      btn.onclick= function() {
          div.innerText=getDate();//若这句不在函数内，则刷新之后直接出时间，不用点击按钮

}

      function getDate() {
          var date=new Date();
          var year=date.getFullYear();
          var month=date.getMonth()+1;
          var dates=date.getDate();
          var day=date.getDay();
          var arr=['星期日','星期一','星期二','星期三','星期三','星期四','星期五','星期六'];
          return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
      }
  </script>
</body>

innerText （非标准）与innerHTML（w3c标准，更为常用）的区别

①前者不识别html的标签，后者识别

 <div></div>
  <script>
      var div=document.querySelector('div');
      div.innerText='<strong>今天是:</strong>2019';//输出为<strong>今天是:</strong>2019
      div.innerHTML='<strong>今天是:</strong>2019';//按理想效果输出
  </script>

②这两个属性都是可读写的，可以获取标签里面的内容

 <p>
      我是文字
      <span>345</span>
  </p>
  <script>
      var p=document.querySelector('p');
      console.log(p.innerText);//我是文字 345
      console.log(p.innerHTML);/*我是文字
                                 <span>345</span>*/
  </script>

修改元素属性

猜你喜欢