《DOM编程》

用户2701579443253
101 阅读3分钟

DOM（Document Object Model）

文档对象模型 定义：把网页抽象成document对象并对他进行操作的方式就是DOM。
JS用document操作网页。

获取元素（Element），也叫标签（Tag）

  1. window.idxxx或直接idxxx（获取id）
  2. document.getElementById('idxxx')
  3. document.getElementsByTagName('div')[0]
  4. document.getElementsByClassName('red')[0]
  5. docement.querySelector('#idxxx')
  6. document.querySelectorAll('red')[0]

主要用第五点和第六点

获取HTMl元素

  • document.documentElement
  • 获取head元素
    • document.head
  • 获取body元素
    • document.body
  • 获取窗口（窗口不是元素）
    • window
  • 获取所有元素
    • document.all(第六个falsy值）

获取到的所有元素都是对象

元素的六层原型链

image.png

节点（node）

  • 节点包括
      1. 元素（element），也叫标签（tag）
      1. 文本（text）
      1. 注释（comment）
      1. 文档（document）

在任何节点输入nodeType获取到他的类型

增

创建一个标签节点

  • let div1 = document.createElement('div')
  • document.createElement('style')
  • document.createElement('script')

创建文本节点

  • text1 = document.createTextNode('hi')

标签里插入文本

  1. div1.appendChild（text1） node提供的接口
  2. div1.innerText = 'hi'或div1.textContent = 'hi'(element提供的接口)
  3. 不能混着用.

插入页面

  • 创建的标签默认出去JS线程中
  • 把他插入head或者body才会生效
  • document.body.appendChile(div1)
  • 或者在页面元素.appendChild(div1)

一个元素不能出现在两个地方，除非把它复制一份\

    拷贝：let div2 = div1.cloneNode(true)

删

  1. div1.parentNode.removeChild(div1) —————— IE使用
  2. div1.remove()
    • 只是从文档中移出来
    • div1 = null ———————— 彻底删除

改

  • 改id：———— div1.id = 'div1'
  • 改class：
    • div1.className = 'red blue'(全覆盖)——————div1.className += ' red'
    • div1.classList.add('green')——————加class
  • 改style：div1.style = 'width:100px;color:red'
  • 改style的一部分： div1.style.color = 'red'
  • 改data-属性：
    • div1.getAttribute('data-x','test')
    • div1.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.innerText = 'xx'
    • div.textContent = 'xx'
    • 无任何区别

改html内容

div.innerHTML = 'xxx'

改标签

  • div.innerHTML = '' ——————————先清空
  • div1.appendChild(div2)————————再加东西

改父元素

newParent.appendChild(div)

查

  • 查爸爸

    • div1.parentNode或者div1.parentElement

  • 查爷爷

    • div1.parentNode.parentNode

  • 查儿子

    • div1.childNode —————— 包含文本节点和空格
    • div1.children ——————— 不包含文本节点

  • 查兄弟姐妹，还要排除自己

    • div1.parentNode.children

image.png

  • 查看老大 —————— div.firstChild
  • 查看老小 ——————div.lastChild
  • 查看上一个哥哥 —————— node.previousSibling
  • 查看下一个弟弟 —————— node.nextSibling
  • 查看上一个元素哥哥 —————— node.previousElementSibling
  • 查看下一个元素弟弟 —————— node.nextElementSibling

DOM跨线程操作

  • 各线程各司其职
    • JS引擎不能操作界面，只能操作JS
    • 渲染引擎不能操作Js，只能操作页面
  • document.body.appendChild(div1)是如何改变页面的
    • 当浏览器发现JS在body里加了个div1对象
    • 浏览器先通知渲染引擎在页面里也加一个div元素
    • 新增的div元素所有属性都照抄div1对象

属性同步

  • 标准属性
    • 对标准属性的修改，会被浏览器同步到页面，如（id、className、title等）
  • data- 属性：同上
  • 非标准属性
    • 对非标准属性的更改，只会停留在js线程中，不同步到页面
  • 如果你有自定义属性想被同步到页面，使用data-作为前缀

properties ————— attributes

  • property（属性）
    • JS线程中div1的所有属性，叫做div1的property
  • attribute（属性）
    • 渲染引擎中div1对应标签的属性，叫attribute

区别

  • 大部分时候，同名的property和attribute相等
  • 如果不是标准属性，只在一开始时相等
  • attribute只支持字符串
  • property支持字符串，布尔等
avatar
文章
阅读
粉丝