【12. DOM】

霁月独觞

已于 2022-05-07 14:32:02 修改

阅读量43

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-05-05 18:32:21 首次发布

本文链接：https://blog.csdn.net/weixin_40940067/article/details/124593834

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

DOM

定义
获取元素
获取元素的关系节点
操作元素
元素的属性
元素的样式
元素的尺寸
圆周运动

定义

文档对象模型 Document Object Model
DOM中有一个顶级对象document

获取元素

document.getElementById() 通过id名获取
	返回值：返回元素
document.getElementsByClassName() 通过class名获取
	返回值：是一个伪数组
document.getElementsByTagName() 通过标签名获取
	返回值：是一个伪数组
document.getElementsByName() 
	返回值：返回所有满足条件的元素（伪数组）
document.querySelector('.class名|标签|#id名') 根据css选择器来获取元素
	返回值：返回第一个满足条件的元素
document.querySeletorAll('.class名|标签|#id名') 根据css来选择元素
	返回值：返回所有满足条件的元素(伪数组)

获取元素的关系节点

【1】childNodes 获取元素所有的子节点---（抱括元素节点，文本节点，注释节点）
【2】children  获取元素下面所有的'[子元素]'节点

【3】firstChild  获取元素中第一个子节点---（抱括元素节点，文本节点，注释节点）
【4】firstElementChild 获取元素中的第一个'[子元素]'节点

【5】lastChild 获取最后一个子节点----（抱括元素节点，文本节点，注释节点）
【6】lastElementChild 获取最后一个'[子元素]'节点

【7】previousSibling 获取元素上一个兄弟节点----（抱括元素节点，文本节点，注释节点）
【8】previousElementSibling 获取上一个兄弟'[元素]'节点

【9】nextSibling 获取下一个兄弟节点----（抱括元素节点，文本节点，注释节点）
【10】nextElementSibling 获取下一个兄弟'[元素]'节点

【11】parentNode || parentElement 通过子元素获取'[父元素]'

节点的分类：
     【1】元素节点  标签名
     【2】属性节点  使用attribute来获取
     【3】文本节点  text   空格、换行、文字
     【4】注释节点  comment
     
nodeType 来判断节点的类型
       1===元素节点
       2===属性节点
       3===文本节点
       8===注释节点
 
 <div class="box" index="1" id="box1">
        <!-- 我是注释 -->
        文本节点99
        <p>我是p标签</p>
        文本节点99
</div>

console.log(box.childNodes);
var c1 = box.childNodes[3]
console.log(c1.nodeType);//1
console.log(box.attributes);
console.log(box.attributes[0].nodeType);//2

在这里插入图片描述

操作元素

操作dom元素：对dom元素的增删改查

增：给已经存在页面中元素添加子元素
    【1】创建元素 document.createElement('div')
    【2】创建文本节点：document.createTextNode()
    【3】父元素.appendChild(子元素) 把子元素添加到父元素中，
            追加为这个父元素的最后一个子元素
    【4】父元素.insertBefore(dom1,dom2) 把dom1追加到 dom2的前面

删：把页面中的一个已存在的元素删除
       【1】父元素.removeChild(你要删除的子元素)
       【2】你要删除的元素.remove()
改：用新的元素替换以页面中已经存在的元素
     【1】父元素.replaceChild(dom1,dom2) 用dom1替换dom2
查：获取元素

克隆元素：
      元素.cloneNode(布尔值)  把这个元素赋值下来
      布尔值的默认值为 false ，只克隆当前元素，不会克隆内容
      true 的时候，会把元素的所有内容都克隆

元素的属性

元素的属性分类：

dom对象的属性：使用console.dir() 打印dom对象，里面存在的属性都可以
        用点（.）形式来调用
      innerHTML  innerText  style  className  id ...
        
HTML元素的属性：直接在HTML结构上存在的属性，称之为HTML属性，不能使用.的形式来调用
      【1】getAttribute('属性')  获取HTML结构上属性的属性值
      【2】setAttribute('属性'，'属性值') 给元素设置HTML属性
      【3】removeAttribute('属性')

元素的样式

classList

className 是覆盖式的添加class名 
classList 得到就是元素所有的class 以数组的形式存储

add() 给元素添加class名 不会覆盖原来的class名
contains() 判断元素是否包含某个class名,返回值为布尔值，如果有就返回true，没有就返回false
remove() 移出某一个class名
replace('已存在的class名','用来替换的class名') 替换class名
toggle() 切换class名，如果元素已经存在 就移出，如果元素不存在这个class名那么就添加

box.classList.toggle('active')

行内样式
dom.style.left = '20px'

非行内样式
window.getComputedStyle(dom元素).css属性   IE9以上
元素.currentStyle.css属性   只有IE6以上浏览器识别，其他浏览器大多不识别

元素的尺寸

语法：元素.clientHeight
返回值: number

clientHeight 获取元素的在页面中占据位置（height +padding）大小
clientWidth 获取元素的在页面中占据位置（width+padding ）

clinetLeft  获取元素的左边框  宽度
clientTop  获取元素的上边框
 
 
offsetHeight 获取元素在页面中占据位置（height +padding + border）
offsetWidth   获取元素在页面中占据位置(width + padding + border)

offsetLeft   获取元素左边的偏移量,跟定位有关系
如果父元素没有定位的时候，获取的就是 该元素到浏览器最左边的距离
 如果有父元素有定位的时候，该元素相对父元素定位，获取的就是该元素到定位元素最左边的距离

offsetTop 获取上面的偏移量,跟定位有关系
 如果父元素没有定位的时候，获取的就是 该元素到浏览器最上边的距离
 如果有父元素有定位的时候，该元素相对父元素定位，获取的就是该元素到定位元素最上边的距离

圆周运动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 400px;
      height: 400px;
      border: 2px solid red;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .box .box1 {
      width: 100px;
      height: 100px;
      background: green;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .box .box2 {
      width: 20px;
      height: 20px;
      background: orange;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

  <script>
    let box = document.querySelector('.box');
    let box2 = document.querySelector('.box2');

    let r = box.offsetWidth / 2;
    let deg = 60;
    setInterval(() => {
      // 先给一个角度 根据角度求弧度
      var radian = (deg * Math.PI) / 180;
      // 根据弧度求 正弦 和 余弦
      let a = Math.sin(radian) * r;
      let b = Math.cos(radian) * r;
      box2.style.left = r - b - box2.offsetWidth / 2 + 'px';
      box2.style.top = r - a - box2.offsetHeight / 2 + 'px';
      deg += .1;
    }, 1);
  </script>
</body>

</html>