元素也叫标签

API

1. window.idxxx 或者直接用idxxx
2. document.getElementById('idxxx')
3. document.getElementsByTagName('name')[0]
4. document.getElementsByClassName('red')[0]
5. document.querySelector('#idxxx')
6. document.querySelectorAll('.red')[0]

注意点

• 工作中用5/6
• demo直接用1
• 兼容IE用2-4

获取特定元素

• 获取html元素

document.documentElement

• 获取head元素

document.head

• 获取body元素

document.body

• 获取窗口(不是元素)

window

• 获取所有元素(第六个falsy值)

document.all

节点的增删改查

增

• 创建一个标签节点

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

• 创建一个文本节点

let text1 = document.createTextNode('你好');

• 标签里面插入文本

div1.appendChild(text1)
div1.innerText='你好' 或者 div1.textContent='你好'
// 但是不能用
div1.appendChild('你好')

// 创建的标签默认处于JS线程中，必须把它插入到head或者body里面，他才会生效
document.body.appendChild(div)
页面中已知元素.appendChild(div)

删

• 两种方法

// old
parentNode.childChild(childNode)
// new
childNode.remove()

改

// 该class
div.calssName = 'red blue' // (全覆盖)
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.calssList / a.href
div.getAttribute('class')/a.getAttribute('href')
// 两种方法都可以，但是值可能稍微有些不同

改内容

// 改文本内容
div.innerText='xxx'
div.textContent='xxx'
// 上面两种几乎没有区别

// 改html内容
div.innerHTML='<strong>重要内容</strong>'
// 改标签
div.innerHTML='' // 先清空
div.appendChild(div2)

// 改父元素
newParent.appendChild(div)
// 直接这样就可以了，直接从原来的地方消失

查

// 查爸爸
node.parentNode / node.parentElement
// 查爷爷
node.parentNode.parentNode
// 查子代
node.chiildNodes/node.children
// 查兄弟姐妹
node.parentNode.childNodes
node.parentNode.children
// 查看老大
node.firstChild
// 查看老幺
bode.lastChild
// 查看上一个哥哥
node.previousSibling
// 查看下一个弟弟
node.nextSibling