目录

1.DOM

2.DOM相关操作

(1)获取元素

(2)操作元素

(3)操作元素属性

(4)操作元素类名

(5)操作元素样式

3.节点操作

4.事件

5.事件传播

6.定时器

7.位置及坐标

---

1.DOM

• Document Object Model 文档对象模型
• 一整套操作文档流相关内容的属性和方法
• 可以做的操作: 修改样式  修改属性  改变位置 添加事件

2.DOM相关操作

(1)获取元素

• 通过id获取 document.getElementById('id名')
• 通过类名获取: document.getElementsByClassName('类名') 获取到是一个数组
• 通过标签类型获取: document.getElementsByTagName('标签名)
• 通过选择器获取:  一个: document.querySelector('选择器')   多个:querySelectorAll (获取到是一个数组)

(2)操作元素

• 文本内容(标签中的内容): innerText
• 超文本内容(包含标签): innerHTML

(3)操作元素属性

• 获取原生属性:    e.g:可直接获取 id, 但name和class不可(保留字)
• 获取自定义属性:   getAttribute('属性名')
• 设置自定义属性: setAttribute('属性名', '属性值')
• 移除自定义属性: removeAttribute('属性名')
• H5自定义属性(data-属性名)获取: dataset.属性名/ dataset['属性名']  多个-连接使用小驼峰式命名规则取

(4)操作元素类名

• 修改:  ele.className = '修改后类名'
• 移除: ele.className = ""

(5)操作元素样式

• 获取行内样式: ele.style.样式名 (小驼峰)
• 修改行内样式: ele.style.样式名 (小驼峰) = '修改后的值'   (行内样式优先级最高)
• 获取非行内样式: window.getComputedStyle(ele).样式名(小驼峰)

<ul>
    <li id="apple" class="qqqq">apple</li>
    <li class="orange">orange1</li>
    <li class="orange">orange2</li>
    <li>pear</li>
    <li id="peach" class="peach">peach</li>
  </ul>
  <ol >
    <li class="oli">ollll</li>
  </ol>
  <div class="div1" style="background-color: antiquewhite;">div1</div>
  <div id="divId2" class="divCls2" style="background-color: antiquewhite;">div2</div>
  <div id="divId3"  data-index="index3"  data-list-name="divList"  class="" style="background-color: antiquewhite;">div2</div>
  <script>
    /* DOM  Document Object Model 文档对象模型
        一整套操作文档流相关内容的属性和方法
        可以做的操作: 修改样式  修改属性  改变位置 添加事件
    */
    // DOM操作步骤
    // 1. 获取元素
    // (1)通过id获取, id唯一   document.getElementById('ID名')
    var eleApple = document.getElementById('apple')
    console.log(eleApple);  //<li id="apple">...</li>
    // (2)通过class类名获取, 可获取一类   document.getElementsByClassName('类名')  返回数组
    var elesOrange = document.getElementsByClassName('orange')   
    console.log(elesOrange);  //HTMLCollection(2) [li.orange, li.orange]zi
    // (3)通过标签名获取 document.getElementsByTagName('标签')  返回数组
    var elesLi = document.getElementsByTagName('li')
    console.log(elesLi);  //HTMLCollection(5) [li#apple, li.orange, li.orange, li, li, apple: li#apple]
    // (4)通过选择器获取  获取到第一个document.querySelector('选择器')    获取到所有该选择元素document.querySelectorAll('选择器')
    var elesSel = document.querySelector('li.orange')
    console.log(elesSel);
    var elesSelAll = document.querySelectorAll('ul li')
    console.log(elesSelAll);

    // 2. 操作元素
    // (1) 操作文本内容(标签中文本内容)  innerText
    eleApple.innerText = '苹果'
    // (2) 操作超文本内容(标签及文本内容)
    var div1 = document.getElementsByClassName('div1')
    div1[0].innerHTML = "<a href='#'>111div111</a>"   //类名获取元素, 返回数组, 故div1[0]

    // 3. 操作元素属性
    // (1) 获取原生属性  可直接获取 id     但name和class不可
    var div2 = document.getElementById('divId2')
    console.log(div2.id);   // divId2
    // (2) 获取自定义属性  getAttribute('属性名')
    console.log(div2.getAttribute('class'));  //divCls2
    // (3) 设置自定义属性 setAttribute('属性名', '属性值')
    div2.setAttribute('class','div2222');
    console.log(div2.className);  //div2222
    // (4) 移除自定义属性 removeAttribute('属性名')
    div2.removeAttribute('class')
    console.log(div2.className); // <empty string> 空字符串
    // (5) H5新增  自定义属性    data-开头的属性名    dataset.  / dataset[' ']   ie11才开始支持
    var div3 = document.getElementById('divId3')
    console.log(div3.dataset.index);  // index3
    console.log(div3.dataset['index']); // index3
    console.log(div3.dataset.listName); // divList     多个-连接的属性名, 获取时采用小驼峰式命名规则
    
    // 4. 操作元素类名 className
    var peach = document.getElementById('peach')
    // (1) 修改元素类名
    peach.className = 'peach_className'
    // (2) 移除元素类名
    peach.className = ""   //  标签显示 class=""

    // 5. 操作元素样式
    // (1) 操作行内样式
    //  获取样式
    console.log(div2.style.backgroundColor);  //antiquewhite
    //  修改样式
    console.log(div2.style.backgroundColor = 'blue');  //blue
    // (2) 获取非行内样式
    console.log(window.getComputedStyle(div2).fontSize);   //20px
  </script>

3.节点操作

• 创建节点: createElement(' ')
• 追加节点: appendChild(ele)
• 添加至指定节点之前: 父.insertBefore('子')
• 移除子节点: removeChild(ele)
• 移除本节点: remove()
• 克隆节点: cloneNode()  默认false(只克隆该节点), true包含所有子节点

<ul>
    <li>我是原生第1个li</li>
    <li class="pre">我是原生第2个li------className:pre  </li>
  </ul>
  <script>
    var ulEle = document.querySelector('ul')
    var preLi = document.getElementsByClassName('pre')[0]   

    // 操作节点
    // 1. 创建节点   createElement
    var li1 = document.createElement('li')
    // 设置属性
    li1.setAttribute('id','myLi')
    li1.innerText = '我是创建的节点------myLi1---追加的'

    // 2. 追加节点   appendChild()
    ulEle.appendChild(li1)

    // 3. 在某个节点的子节点前添加   insertBefore()  将一个节点添加到父节点的指定子节点前面
    var li2 = document.createElement('li')
    li2.innerText = '我是创建的节点------myLi2---添加到指定节点之前的'
    ulEle.insertBefore(li2,ulEle.children[0])

    // 5. 移除子节点   removeChild()      remove()移除节点本身
    ulEle.removeChild(li1)
    li2.remove()
    // 6. 克隆节点   cloneNode(true)  true:所有子节点都克隆, false只克隆该节点本身,不可隆子节点
    var ulEle2 = ulEle.cloneNode(true)
    console.log(ulEle2);
  </script>

4.事件

事件: 用户触发指定行为(代码与页面内容的一个约定)

事件绑定三要素:

• 事件源(谁):  和谁绑定,
• 事件类型:  约定一个行为
• 事件处理函数:  触发行为时,执行的代码

语法:

•  方式1: 事件源上添加事件类型   <button οnclick="事件处理函数"></button>
• 方式2: 获取事件源后,再绑定事件    btn.on事件名 = function(){ }
• 方式3: 获取事件源后,再事件监听  btn.addEventLister('事件名', function(){ }, )

事件对象(e/event): 浏览器记录 , 当事件触发时, 一个描述该事件信息的对象数据类型

    var btn = document.querySelector('button')
    btn.addEventListener('click',clickMe(e))
    function clickMe(e){
      console.log(e);
    }

5.事件传播

三个阶段:

• 捕获阶段: 沿DOM树从上往下 e.g:window ->document-> html -> body -> div.father -> div.son -> btn
• 目标阶段: 目标盒子
• 冒泡阶段: 沿DOM树从下往上 e.g: btn -> div.son ->  div.father ->  body ->  html -> document-> window

阻止冒泡: e.stopPropagation()

事件委托: e.target对象, 自身不做事件处理,交给父级来做

  <div class="father">
    <div class="son">
      <button class="btn">点点点</button>
    </div>
  </div>
  <script>
    var father = document.querySelector('.father')
    var son = document.querySelector('.son')
    var btn = document.querySelector('.btn')
    // 事件委托   将btn的工作委托给父级son
    son.onclick = function(e){
      e.stopPropagation()  // 阻止冒泡, 否则点击btn会弹出father
      if(e.target.className === 'btn'){ 
        alert('btn1')
      }
    }
    father.onclick = function(e){
        alert('father')
    }
  </script>

6.定时器

• setInterval(函数, 毫秒数)    每隔多少毫秒执行一次(重复执行)
• setTimeout(函数, 毫秒数)     隔多少秒后执行一次  (只执行一次)
• clearInterval(定时器)    清除定时器

    window.setInterval(function(){
      console.log('1');
    },1000)
  
    var time2 = window.setTimeout(function(){
      console.log('2');
    },2000)
    // 清除定时器
    window.clearInterval(time2)

7.位置及坐标

 <!-- div {  margin: 400px; padding: 20px; width: 100px; height: 100px; border: 20px solid rgb(250, 131, 131); background-color: rgb(246, 186, 186); } -->
    <div></div>
    <script>
      var div = document.querySelector('div')
      // BOM中
      // 获取可视区域宽/高  window.innerWidth / window.innerHeight
      console.log(window.innerWidth)
      console.log(window.innerHeight)
      // 获取卷去的宽/高  document.documentElement.scrollTop || document.body.scrollTop

      // DOM中
      // 获取元素尺寸
      // offsetHeight / offsetWidth (元素内容 + padding + border)相当于IE模型
      console.log(div.offsetHeight) // 180
      console.log(div.offsetWidth) //  180
      // clientHeight / clientWidth    (元素内容 + padding)
      console.log(div.clientHeight) // 140
      console.log(div.clientWidth) // 140
      console.log(div.clientLeft) // 20    内容距离左边的尺寸
      console.log(div.clientTop) // 20     内容距离上边的尺寸

      // 事件对象内部信息
      // 鼠标事件    e事件对象
      div.onclick = function (e) {  
        // offsetX / offsetY   鼠标相对于触发事件元素的偏移量
        console.log(e.offsetX)
        // clientX / clientY   鼠标相对于浏览器可视窗口的偏移量  即使有滚动条,也是相对于可视窗口
        console.log(e.clientX)
        // pageX / pageY  鼠标相对于文档流的偏移量
        console.log(e.pageX)
        // screenX / screenY  鼠标相对于电脑屏幕的偏移量
        console.log(e.screenX)
      }

PreviousNotes:

JS.2-DOM,事件高级_Mteee.的博客-CSDN博客