JavaScript 进阶班之DOM技术-pink老师

JavaScript进阶班之DOM技术

1 DOM简介

1.1 什么是DOM

• 文档：一个页面就是一个文档，DOM中使用doucument来表示
• 元素：页面中的所有标签都是元素，DOM中使用 element 表示
• 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM 把以上内容都看做是对象

2 获取元素

2.1 如何获取页面元素

• 根据id来获取

  使用 getElementByld() 方法可以获取带ID的元素对象

doucument.getElementByld('id名')
====================================
<div id="time">2019-9-9</div>
<script>
    var timer = document.getElementById('time');
    console.log(timer);  // <div id="time">2019-9-9</div>

    // 5. console.dir 打印我们的元素对象，更好的查看里面的属性和方法
    console.dir(timer);
</script>

• 根据标签名来获取

  根据标签名获取，使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合

  doucument.getElementsByTagName('标签名');
  ===============================================
  var lis = document.getElementsByTagName('li');
      console.log(lis);
      console.log(lis[0]);
      // 2.依次打印,遍历
      for (var i = 0; i < lis.length; i++) {
       
          console.log(lis[i]);
  }
  

  • 返回的是获取过来元素对象的集合，以伪数组的形式存储
  • 如果获取不到元素，则返回为空的伪数组(因为获取不到对象)

  还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己

  ol.getElementsByTagName('li');
  =============
  <script>
  	//element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
      var ol = document.getElementById('ol');
      console.log(ol.getElementsByTagName('li'));
  </script>
  
  

• 通过H5的新增加的方法获得

  • 根据类名的方式
    • document.getElementsByClassName('类名')
  • 根据指定选择器返回第一个元素对象
    • document.querySelector('选择器');
  • 根据指定选择器返回所有的元素对象
    • document.querySelectorAll('选择器');

  <script>
      // 1. getElementsByClassName 根据类名获得某些元素集合
      var boxs = document.getElementsByClassName('box');
      console.log(boxs);
  
      // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
      var firstBox = document.querySelector('.box');
      console.log(firstBox);
      var nav = document.querySelector('#nav');
      console.log(nav);
      var li = document.querySelector('li');
      console.log(li);
  
      // 3. querySelectorAll()返回指定选择器的所有元素对象集合
      var allBox = document.querySelectorAll('.box');
      console.log(allBox);
      var lis = document.querySelectorAll('li');
      console.log(lis);
  </script>
  

2.2 获取特殊元素

• 获取body元素
  • var bodyEle = document.body
• 获取html元素
  • var htmlEle = document.documentElement

3 事件基础

3.1 事件三要素

1. 事件源
2. 事件类型
3. 时间处理程序

3.2 执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值的形式）

<script>
    // 执行事件步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var div = document.querySelector('div');
    // 2.绑定事件 注册事件
    // div.onclick 
    // 3.添加事件处理程序 
    div.onclick = function() {
   
        console.log('我被选中了');
    }
</script>

3.3 鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

4 操作元素

4.1 改变元素内容

element.innerText ----不识别html标签

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

element.innerHTML

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

    p1.innerText = '<strong>'+getDate()+'<strong>'; 	//会全部显示处理，无法处理strong标签。
    p2.innerHTML = '<strong>'+getDate()+'<strong>';  //显示粗体

4.2 修改元素属性

// img.属性
img.src = "xxx";

input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

4.3 修改样式属性

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

行内样式属性 element.style

// element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';

//JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
//JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高

类名样式属性 element.className

// element.className

1. 如果样式修改较多，可以采取操作类名方式更改元素样式
2. class 因为是个保留字，因此使用className来操作元素类名属性
3. className 会直接更改元素的类名，会覆盖原先的类名

4.4 案例

4.4.1 效仿淘宝关闭二维码图片

    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">         //二维码图片
        <i class="close-btn">×</i>                //x号
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick =