知识库

DOM: document object model 文档对象模型，提供一些属性和方法提供我们操作页面中的元素

获取DOM元素的方法

document.getElementById() 指定在文档中，基于元素ID或者这个元素对象
[context].getElemensByTagName() 指定上下文（容器）中，通过标签名获取一组元素集合
[context].getElemensByClassName() 指定上下文中，通过样式类名获取一组素集合（不兼容IE6-8）
[context].getElemensByName() 在整个文档中，通过标签的name属性值获取一组节点集合（IE中只有表单元素的name属性才能被识别，所以我们一般应用于表单元素的处理）
document.head / body / documentElement 获取页面中的head body html三个元素
[context].querySelector([selector]) 在指定上下文中，通过选择器获取指定的元素对象（不兼容IE6-8）
[context].querySelectorAll([selector]) 在指定上下文中，通过选择器获取指定的元素集合（不兼容IE6-8）
document.querySelector('a') 获取第一个a标签
document.querySelectorAll('#box a') 获取#box下所有a标签
document.querySelectorAll('[name=username]') 获取所有name属性为username的标签

基于js获取到的DOM元素就是个对象,里面包含很多浏览器自带的,用来操作元素的键值对所以正常对象的操作方法都适用于DOM元素 box.id box[id]

下面哪些方法可以成功修改样式, let box = document.getElementById('box') box.style.color = 'black' // 可以,存储的是box对象的地址

let AA = box.style AA.color = 'black' // 可以,存储的是style对象的地址

let BB = box.style.color BB = 'red' // 不可以,存储的是基本类型值

attributes: NamedNodeMap集合,包含了其拥有的所有属性(内置属性id/class以及自定义属性)

classList: DOMTokenList集合,包含所有拥有的样式类名 ele.classList.add('active') 新增样式类,向指定样式集合中新增一个样式类(兼容性差) ele.classList.remove 移除样式类 ele.classList.toggle 之前有这个样式类就移除,没有就新增 ele.classList.contains 验证是否包含某个样式类 ele.classList.forEach 遍历这些样式类,类似于数数的forEach ...

className: 包含所有样式类名的字符串 ele.className = 'active' 会把之前所有的样式类名都给覆盖掉 ele.className += ' active' 不会把之前所有的样式类名都给覆盖掉

id: 设置或获取id

tagName: 获取标签名(大写)

innerHTML / innerText 获取或设置非表单元素中的内容 innerHTML可以识别HTML标签 innerText把所有内容当作文本来处理

value 获取或设置表单元素中的内容

onxxx 事件属性

给元素设置自定义属性 1.元素都是对象.直接操作堆内存,在堆内存中设置自定义属性 ele.xxx = xxx 或者 ele[xxx] = xxx, 无法通过getAttribute获取 2.ele.setAttribute([key], [value]),直接操作DOM结构,在元素结构上新增自定义属性,会出现在渲染后的标签中, 通过ele.getAttribute([key])获取,ele.removeAttribute([key])移除 3.手动在标签里面写属性, 可以通过getAttribute获取

style: CSSStyleDeclaration对象,获取或修改行内样式 ele.style 修改(获取)的都是行内样式 ele.style.color = 'red' ele.style.fontSize = '14px' ele.style.cssText = width: 200px; height: 200px;

真实项目中,修改元素样式 ele.style.xxx = 'xxx' 设置行内样式 ele.style.cssText = xxx 设置行内样式 ele.classList.add/remove('xxx') ele.className = 'xxx'

真实项目中,获取元素样式 ele.style.xxx 获取行内样式 ele.className 获取所有样式 window.getComputedStyle([元素], [伪类]) 第一个参数是操作的元素,第二个参数是元素的伪类, 结果是一个样式对象,包含了当前元素经过浏览器渲染后的样式 let obj = window.getComputedStyle(box, null) obj.margin ... 无论是外联/内嵌/行内,都可以获取到浏览器设置的默认样式也可以获取到 IE6-8不兼容,需要基于ele.currentStyle属性获取 let obj = ele.currentStyle

基于盒模型获取样式 clientWidth/Height/Left/Top offsetWidth/Height/Left/Top/Parent scrollWidth/Height/Left/Top getBoundingClientRect ...

获取DOM元素的方法 ​

获取DOM元素的方法