《DOM编程》

用户7584002365245
69 阅读2分钟

JS就是用document操作网页

获取元素

多个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.documentElememt
  • 获取head元素，document.head
  • 获取body元素，document.body
  • 获取窗口，window
  • 获取所有元素,document.all document.all是第六个fasly值
div>span:child[2]//某个div的第二个儿子

节点Node包括以下几种

  • x.nodeType得到一个数字
  • 1表示Element,也叫标签Tag
  • 3表示文本Text
  • 8表示注释Comment
  • 9表示文档Document
  • 11表示文档片段DocumentFragment
  • 记住1和3即可

节点增删改查

创建一个标签节点

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

删除

  • 旧方法：parentNode.removeChild(childNode)
  • 新方法：childNode.remove() 一个node移出DOM树页面，它还存在内存中，还能再次回到页面中，若把node设置为null就不能

改属性

写标准属性

  • 改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='quan' 读标准属性
  • 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='xxx'
  • div.textContent='xxx' 改HTML内容
  • div.innerHTML='重要内容' 改标签
  • div.innerHTML=''//先清空
  • div.appendChild(div2)//再加内容 改爸爸
  • newParent.appendChild(div)
  • 直接这样就可以，直接从原来的地方消失

查

查爸爸

  • 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
avatar
文章
阅读
粉丝