js（dom选择器，尺寸类，属性操作）

最新推荐文章于 2022-10-23 16:18:34 发布

原创最新推荐文章于 2022-10-23 16:18:34 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #js

js 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了DOM模型，详细讲解了元素、文本、属性和注释节点的选择方法，包括元素节点选择器、关系选择器及伪数组操作。重点阐述了属性操作和样式管理，涵盖了HTML、CSS和JavaScript在DOM上的应用。

保持对代码的热爱并保存怀疑态度
DOM

介绍

DOM：文档对象模型，document，提供了页面（网页，文档）的操作
标准化组织：W3C
document表示页面，html结构，类似于树形结构（家族结构），页面由节点组成
页面上所有的成份都是节点
- 标签（元素）节点
- 文本节点
- 属性节点
- 注释节点
- 根节点
所有的节点都是对象类型的数据
如何操作网页，操作DOM，操作节点，哪个节点，选中其中一个↓↓↓

选择器

元素节点选择器
- 单个对象：
  - 就算有多个符合条件的元素存在，也只能选择一个
  - 直接选择：id，querySelector
  - 关系选择：parentNode（通过子选父），firstElementChild（第一个子），lastElementChild（最后一个子， previousElementSibling（上一个兄弟），nextElementSibling（下一个兄弟）
- 数组：
  - 就算只有一个符合条件，也是以数组的形式返回
  - 使用时，一定要解析只有，才能拿到真正的元素
  - document.getElementsBy(TagName)
  - 直接选择：className(class选择器)，name（名字选择器），tagName(标签选择器)，querySelectoAll(多个一样的数据，不加all表示只选择一个，加了需要用数组形式来选择【0】，【1】…)
  - 关系选择：children 例： console.log(abox[0].children);
    其他节点节点选择器
  - 因为其他节点的特殊性，无法单独命名，所以没有直接选择器，都是关系选择器
  - 属性不参与关系（attributes不是关系选择器）

子元素节点获取的是标签；
字节点获取的是所有节点，包括注释…
var obox = document.getElementsByClassName(“box”)[0];
// 子元素节点选择器
console.log(obox.children);

// 子节点选择器
var achild = obox.childNodes
console.log(achild);

单个对象
- firstChild（第一个对象），lastChild（最后一个），previousSibling（上一个兄弟节点），nextSibling（下一个兄弟）空格什么的啥都有，注意是哪个
数组
- childNodes（所有的子节点），attributes（属性值）

DOM中所有的数组都是伪数组，只能使用索引+长度 arr[0]，不能使用数组的操作方法( 空格什么的啥都有，注意是哪个)

3.childNodes／过滤空白节点
通过对象.childNodes 获得所有子节点的集合

 节点属性 nodeType 返回值为数值
                   节点类型(nodeType)      节点名字(nodeName)     节点值(nodeValue)
      元素节点（标签）           1                         标签名                       null
    文本节点（空格）             3               #text                            文本
      注释节点            8                      #comment                      注释的文字
      文档节点            9                     #document                       null
      属性节点           2                       属性名                              属性值

 通过遍历所有子节点，将空白节点过滤掉，得出所有的元素节点

var textArr = [];
for(var i=0;i<achild.length;i++){
    if(achild[i].nodeType !== 3){
        textArr.push(achild[i]);
    }
}
console.log(textArr);

属性操作

html的属性 - 写在html标签内的属性
- 内置：
  1. 可以使用对象的操作语法，进行操作
    // 内置属性的操作，对象的操作语法
    // console.log(obox1.id);
    // obox1.id = “哈哈哈”
    col.setAttribute(“id”,“ss”)也可以修改
    - 除了一些特殊属性，都是既可以被获取又可以被设置的 style特殊属性另有方法设置
  2. 可使用：get/set/removeAttribute系列方法
- 自定义：
  - getAttribute() 获取
  - setAttribute() 设置（添加或修改）
  - removeAttribute() 删除
js的属性 - 在js中将元素作为对象使用时的属性
- 内置：对象的操作语法
  - innerHTML 整个标签
  - innerText 文本无标签
  - tagName 大写的名字如DIV
  - firstChild
    obox.firstChild
  - …
- 自定义：对象的操作语法
  obox.abc = “123”
  console.log(obox.abc);
  js中能显示但是不能添加到html里
style

样式的操作

获取
- 只能获取行内：元素.style.样式名
- 既能获取行内，又能获取非行内（√）：
  - 正常浏览器：getComputedStyle(元素, false).样式名
  - IE浏览器：元素.currentStyle.样式名

obox.style.border = “solid 10px black”;
// console.log(getComputedStyle(obox, false).background);
2. 设置

元素.style.样式名

元素看得见的区域包括哪些部分：内容+padding+border
每个元素，默认情况下，具有所有的样式属性，只是有值或没值的区别

// 包含块：相对于当前定位元素最近的具有定位的父级

容器尺寸类操作

元素.clientWidth
- cont + padding
元素.offsetWidth
- cont + padding + border
元素.scrollWidth
- cont + padding + 可滚动的距离
元素.offetLeft
- 相对于包含块偏移的位置
元素.scrollLeft - 即可获取，又可设置
- 滚走了的距离

offsetWidth 水平方向 width + 左右padding + 左右border-width
* offsetHeight 垂直方向 height + 上下padding + 上下border-width 全包，进度条border大于1会出现99%
*
* clientWidth 水平方向 width + 左右padding 用这个就不会进度条出现99%
* clientHeight 垂直方向 height + 上下padding
*
* offsetTop 获取当前元素到定位父节点的top方向的距离
* offsetLeft 获取当前元素到定位父节点的left方向的距离
*
* scrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth
* scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight