DOM树

xiaocha0
234 阅读2分钟

DOM中获取页面上的API

  1. window.idxxx或者直接idxxx,都是可以拿到idxxx这个元素的
  2. document.getElementById('idxxx'),拿到id为xxx的元素
  3. document.getElementsByTagName(div)[0],拿到标签名为div的第一个div，[0]表示下标
  4. document.getElementsClassName('xxx')[0]拿到class属性为xxx的元素中的第一个，[0]表示下标

以上都是过时的API，只有在需要兼容IE浏览器的情况下才会使用。下面我写两个经常用到的API

  1. document.querySelector('#idxxx') 拿到id为xxx的这个元素们中的第一个
  2. document.querySelectorAll('xxx')[0] 拿到所有属性为xxx的元素并找出第一个；All代表所有，[0]表示下标。

获取特定的元素

获取html元素

document.documentElment

获取head元素

document.head

获取body元素

document.body ###获取窗口（窗口不是元素）window

获取所有元素

document.all 这个document.all是个奇葩，同时它还是第六个flase值。说起这个五个flase值，我们再来回顾一次：'',NAN,null,undefined,0;这个第六个flase值它可以在所有浏览器里执行，但它是一个价值，通常情况下程序员用它来判断是否是IE浏览器。

node 与Element的区别

通常我们使用x.node.type得到一个数值，通过数字我们知道他的类型。 节点node 包括以下几种：

  1. 元素element，同时也可称作标签
  2. 文本text
  3. 注释comment
  4. 文档doucemnt

.....

通常情况下，我们记住1,3就好；其余的在用到时，我们用到时通过查阅MDN表可以清楚的了解到。

元素的增、删、改、查

增

创建一个元素节点

let div1 = document.CreateElement('div')
document.CreateElement('style')
document.CreateElement('script')
document.CreateElement('li')

创建一个文本

let text1 = document.createTextNOde('你好')

标签里插入文本

div1.appendChile(text1)或
div1.innerText = '你好'
div1.Textcontent = '你好'

注：我们直接使用div1.appendChild('你好')。这是一种语法的混淆。

以上我们创建的标签都是默认处于JS线程中，我们必须把他们插入head和body里才会生效：

document.body.appendChild(div1)或
已经在页面内的元素.appendChild（div1）

删

  • 旧方法
node.parentNode.removeChild(node)
  • 新方法
childnode.remove()

改

写属性

  • 改class
div.className = 'blue'div.className = 'blue'
div.className +=' yellow'
div.classList.add('red')//此时，div的class属性就是blue,yellow,red
  • 改style
div.style='width:100px;color:blue'//改全部
div.style.width = '200px'
div.style.backgroundColor = 'white'//background-color在JS中会被误解，为了解决这个问题，我们把它改写成backgroundColor
  • 改文本内容
div.innerText = 'xxx'//兼容IE
div.Textcontent = 'xxx'
  • 改HTML内容
div.innerHTML = '<strong>重要内容</strong>'//可以直接加标签，需要注意的是HTML
要大写
  • 改标签
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.fristChild
  • 查老幺
node.lastChild
  • 查看上一个哥哥/姐姐
node.previoussibling
  • 查看下一个弟弟/妹妹
node .nextsibling
avatar
文章
阅读
粉丝