DOM编程

Cpt_Jie
93 阅读3分钟

JS用document操作网页，这就是Document Object Model 文档对象模型

获取元素，也叫标签

API

  • window.idxxx 或者直接 idxxx
  • document.getElementByld('idxxx')
  • document.getElementsByTagName('div')[0]
  • document.getElementsByClassName('red')[0]
  • document.querySelector('#idxxx')
  • document.querySelectorAll('.red')[0]
  • 工作中用最后两个
  • 做demo可以用idxxx
  • 中间三个兼容IE用

获取特定元素

  • 获取html标签： document.documentElement
  • 获取head标签： document.head
  • 获取body标签： document.body
  • 获取窗口： window
  • 获取所有标签： document.all，也是第六个false值

结点？元素？

  • 节点分为标签和文字
  • 1 表示元素Element也叫标签Tag
  • 3 表示文本Text
  • 8 表示注释Comment
  • 9 表示文档Document
  • 11 表示文档片段DocumentFragment

节点的增删改查

增

创建一个节点

  • let div1 = document.createElement('div')
  • document.createElement('style')
  • document.createElement('script')
  • document.createElement('li') 创建一个文本节点
  • text1 = document.createTextNode('你好') 标签里面插入文本
  • div1.appendChild(text1)
  • div1.innerText = '你好' 或者 div1.textContent = '你好'
  • 但是不能用div1.appendChild('你好') 创建的标签默认处于JS线程中，必须把它插入到head或者body中他才会生效
  • document.body.appendChild(div)
  • 或者
  • 已在页面中的元素.appendChild(div)
  • 一个元素不能出现在两个地方，只能复制一份
  • let div2 = div.cloneNode(true) //true为深拷贝 false为浅拷贝

删

  • 旧方法 parentNode.removeChild(div1)还可以通过上面的方法添加回来
  • 新方法 childNode.remove() node被移除页面DOM树还是可以回来的

改

写标准属性

  • 改class： div.className = 'red blue'(全覆盖)
  • 改class： div.classList.add('red')
  • 改style： div.style = 'width:100ox;color: blue; 不用
  • 改style一部分： div.style.width = '200px' √
  • 大小写: div.style.backgroundColor = 'white'
  • 改data-*属性: div.dataset.x='frank' 读标准属性
  • div.classList/a.href
  • div.getAttribute('class')/a.getAttribute('href')
  • 两种方法都可以，值可能稍微不同 改事件处理函数
  • div.onclick 默认为 null
  • 默认点击div不会有任何事情发生
  • 但是如果你把div.onclick改为一个函数fn
  • 那么点击div的时候，浏览器就会调用这个函数
  • fn.call(div,event)
  • div会被当做this event贼包含了点击时间的所有信息，如坐标 div.addEventListener是div.onclick的升级版

改内容

  • 该文本内容
  • div.innerText = 'xxx'
  • div.textConten = 'xxx' 改HTML内容
  • div.innerHTML = '重要内容'
  • 内容不能太长，页面会卡死 改标签
  • div.innerHTML = '' //先清空
  • div.appendChild(div2) //再加内容

查

  • 父结点：node.parentNode 或者 node.parnetElement
  • 查爷爷: node.parentNode.parentNode
  • 查子代: node.childNodes 或者 node.children优先使用这个 会实时改变长度
  • 查兄弟姐妹: node.parentNode.childNodes 要排除自己用for循环
  • node.parentNode.children 要排除自己
  • 查老大 node.firrstChild
  • node.lastChild
  • 查看上一个 node.previousSibling
  • node.nextSibling 如何遍历一个div
travel = (node, fn) => {
 fn(node)
 if(node.children){
  for(let i=0;i<node.children.length;i++){
   travel(node.children[i], fn)
  }
 }
}
travel(div1, (node) => console.log(node))

DOM操作是跨线程的

属性同步，标准属性和data-*属性才会同步

  • property
  • JS中div的所有属性
  • attribute
  • 渲染引擎中div对应标签的属性，只支持字符串

封装DOM

举例

  • 电脑笔记本就是CPU、内存、硬盘、主板、显卡的封装
  • 用户只需要接触显示器、键盘、鼠标、触控板等设备，即可操作复杂的计算机

接口

  • 被封装的东西需要暴露一些功能给外部
  • 这些功能就是接接口，如USB接口、HDMI接口
  • 设备只要支持这些接口，即可与被封装的东西通讯
  • 比如键盘、鼠标支持USB接口
  • 显示器支持HDMI接口

库

  • 我们把提供给其他人用的工具代码叫做库
  • 比如jQuery、Undersccore

API

  • 库暴露出来的函数或属性叫做API（应用编程接口）

框架

  • 当你的库变得很大，并且需要学习才能看懂
  • 那么这个库就叫做框架，如Vue/React

对象风格

也叫命名空间风格

avatar
文章
阅读
粉丝