DOM 编程

FENG
114 阅读3分钟

一、获取元素

  1. 有很多 API
window.idxxx或者直接idxxx document.getElementByld('idxx')
document.getElement ByTagName('div')[0]
document.getElement ByclassName('red')[0]
document.querySelector('#idxxx')
document.querySelectorAll('.red')0]

2.用哪一个

  • 工作中用querySelector和querySelectorAll
  • 做demo 直接用idxxx 3.获取特定元素
  • 获取 html元素 document.documentElement
  • 获取head 元素 document.head
  • 获取 body 元素 document.body
  • 获取窗口（窗口不是元素）window
  • 获取所有元素document.all
  • 这个document.all是个奇葩，第6个falsy值

二、节点

（一）节点 Node包括以下几种

  • MDN有完整描述，x.nodeType得到一个数字
  • 1表示元素Element，也叫标签Tag
  • 3表示文本Text
  • 8表示注释 Comment
  • 9表示文档 Document
  • 11表示文档片段 DocumentFragment
  • 记住1和2即可

（二）节点的增删改查

  1. 增
  • 创建一个标签节点
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）

2.删

  • 两种方法
  • 旧方法∶ parentNode.childChild（childNode）
  • 新方法∶childNode.remove（） ·思考

如果一个node被移出页面（DOM树）那么它还可以再次回到页面中吗?试试就知道了 3. 改属性

  • 写标准属性
改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)
两种方法都可以，但值可能稍微有些不同
  1. 改事件处理函数
  • div.onclick默认为 null
  • 默认点击div 不会有任何事情发生
  • 但是如果你把 div.onclick改为一个函数fn
  • 那么点击div的时候，浏览器就会调用这个函数并且是这样调用的fn.cl（div，event）
  • div 会被当做this
  • event则包含了点击事件的所有信息，如坐标·
  • div.addEventListener是 div.onclick的升级版
  1. 改内容
  • 改文本内容
div.innerText ='xxx'
div.textContent='xxx'
两者几乎没有区别
  • 改HTML内容
div.innerHTML='<strong>重要内容</strong>'
  • 改标签
div.innerHTML="// 先清空
div.appendChild（div2）//再加内容

newParent.appendChild(div)
直接这样就可以了，直接从原来的地方消失
  1. 查
  • 查爸爸 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
  • 遍历一个div 里面的所有元素

     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))

三、跨线程操作

  1. 各线程各司其职
  • JS引擎不能操作页面，只能操作 JS
  • 渲染引擎不能操作JS，只能操作页面
  1. 跨线程通信
  • 当浏览器发现JS在body里面加了个div1对象
  • 浏览器就会通知渲染引擎在页面里也新增一个div元素
  • 新增的 div 元素所有属性都照抄div1对象
  • 图示跨线程操作 image.png
  1. 属性同步
  • 标准属性：对 div1的标准属性的修改，会被浏览器同步到页面中，比如 id、className、title等
  • data-*属性，同上
  • 非标准属性：对非标准属性的修改，则只会停留在 JS线程中，不会同步到页面里，比如x属性，
  • 启示：如果你有自定义属性，又想被同步到页面中，请使用data-作为前缀 image.png
  1. Property v.s.Attribute p
  • roperty属性：JS线程中div1的所有属性，叫做div1的property
  • attribute也是属性：渲染引擎中div1对应标签的属性，叫做attribute
  • 区别：大部分时候，同名的property和attribute值相等，但如果不是标准属性，那么它俩只会在一开始时相等，但注意attribute只支持字符串，而property支持字符串、布尔等类型
avatar
文章
阅读
粉丝