DOM基础知识及API

ggbondmaker
151 阅读2分钟

获取元素

API

  • window.idxxx 或者 idxxx
  • document.getElementById('idxxx')
  • document.getElementsByTagName('div')[0]
  • document.getElementsByClassName('red')[0]
  • document.querySelector('#idxxx')
  • document.querySelectorAll('.red')[0] 用哪个
  • 工作中用 querySelector 和 querySelectorAll
  • 兼容 IE 采用 getElement(s)ByXXX

获取特定元素

获取 html 元素

  • document.documentElement 获取 head 元素
  • document.head 获取 body 元素
  • document.body 获取窗口(窗口不是元素)
  • window 获取所有元素
  • document.all
  • 是个奇葩，第 6 个 fasly 值

节点 node

x.nodeType 得到数字类型

  • 1 元素Element，也叫标签 Tag
  • 3 文本 Text
  • 8 注释 Comment
  • 9 文档 Document
  • 11 文档片段 DocumentFragment 记住 1 和 3 即可

节点的增删改查

增

创建一个标签节点

  • let div1 =document.createElement('xxx') 创建一个文本节点
  • let text1 =document.createTextNode('你好') 标签里面插入文本
  • div1.appendChild(text1)
  • div1.innerText='你好'或 div.textContent='你好'
  • 但是不能用 div1.appendChild('你好')

删

两种方法

  • 旧方法:parentNode.childChild(childNode)
  • 新方法:childNode.remove()

改

写标准属性

  • 改 class: div.className='red blue'
  • 改 class: div.classList.add('red')
  • 改 style: div.style='width:100px;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.onlcik 改为一个函数 fn
  • 那么点击 div 的时候，浏览器就会调用这个函数
  • 并且是这样调用的 fn.call(div，event)
  • div 会被当作 this
  • event 包含点击事件的所有信息，如坐标 div.addEventListener

改爸爸

newParent.appendChild(div)

改内容

改文本内容

  • div.innerText ='xxx'
  • div.textContent ='xxx'
  • 两者几乎没有区别 改 HTML 内容
  • div.innerHTML=‘重要内容’ (长度多运行慢) 改标签
  • div.innerHTML ='' //先清空
  • div.appendChild(div2) //再加内容

查

查爸爸

  • node.parentNode 或者 node.parentElement 查爷爷
  • node.parentNode.parentNode 查子代
  • node.childNodes (包括文本节点)
  • node.children 查兄弟姐妹
  • node.parentNode.childNodes 还要排除自己
  • node.parentNode.children 还要排除自己 查看老大
  • node.firstChild 查看老幺
  • node.lastChild 查看上一个哥哥
  • node.previousSibling 查看下一个弟弟
  • node.nextSibling

跨线程操作

JS 引擎不能操作页面，只能操作 JS 渲染引擎不能操作 JS，只能操作页面

属性同步

标准属性

  • 对 div1 的标准属性操作的修改，会被浏览器同步到页面中
  • 如 id、className、titile 等 data-* 属性
  • 同上 非标准属性
  • 对非标准属性的修改，则只会停留在 JS 线程中
  • 不会同步到页面中 启示
  • 如果有自定义属性，有不想被同步到页面中，请使用 data-作为前缀!

property 和 attribute

property 属性

  • JS 线程中的 div 所有属性叫做 div1 的 property attribute 属性
  • 渲染引擎中 div 对应的标签属性，叫做 attribute 区别
  • 大部分时候，相等
  • 如果不是标准属性，只会在一开始时相等
  • attribute 只支持字符串
  • property 支持字符串、布尔等类型
avatar
文章
阅读
粉丝