属性操作
getAttribute()获取元素的属性值
同样的还有：
- createAttribute()
- setAttribute()
- removeAttribute()
var node =document.Element('div')
node.setAttribute('my-attrib','newval')
//相当于先创建属性，再设值了
在html中有：
haha
//我想把href的链接改掉，，，
var link =document.querySelector('a')
link.setAttribute('id','login')
link..setAttribute('id','logout')
link.getAttribute('id')
link.removeAttribute('id')
在页面上引入新的JS：
var scri = document.createElement('script')
scri.setAttribute('src','http://jnfnfanf.com')
document.body.appendChild(scri)
innerHTML,outerHTML,innerText
- 1 后台要数据
- 2 遍历数组，拼接相加就行，字符串
- 3 一次性把拼接好的html放到对应的空的节点下
html中class=navbar的ul和li的形式下：
var navbarDate =[1,2,3]
var html = ''
navbarDate.forEach(function(item){
html += '' +item +' '
})
html //" 1 2 3 "
document.querySelector(.navbar).innerHTML = html
document.querySelector(.navbar) //修改html，把字符串放到html上，当成标签并执行。
与之对应的是innerText:
标签下的文本内容。
document.querySelector(.navbar).innerText = html
"1 2 3 " //页面出现了这些，以文本 形式，并不执行。
innerHTML有安全问题，数据一定不要是用户填写的：
var navbarDate = [1,2,3,'']
然后script标签的内容会被执行的。
所以，最好的还是，创建DOM节点，用innerText调文本，然后放到页面上。
使用方式
设置样式style
node.style.color ='red'
node.style.backgroundColor = ''blue''
document.querySelector('#hello').style.backgroundColor = 'black' //就是操作页面上的ＤＯＭ节点上的style属性
//ahhaahha
一般权重是最高的，其他地方除非有!important的最终权重
document.querySelector('#hello').style.fontSize
//获取不到字体大小，因为这个时候，节点上的style里没有font-size的值
获取getComputedStyle
获取最终计算后的结果。
getComputedStyle(document.querySelector('#hello'))
//得到一个关于目标的属性和值的对象，通过下标可以获取
getComputedStyle(document.querySelector('#hello'))['font-size']
或者：
getComputedStyle(document.querySelector('#hello')).fontSize
class操作
- .classList 查看
- .add('active') 新增
- .remove('active') 删除
- .toggle('active') 切换
- .contains(''active) 判断是否拥有
样式的改变尽量用class的新增和删除实现。
JS Bin
hahaha
hello
页面宽高，内容，滚动条
- element.clientHeight:元素的内容的高度，不包括它的border和margin;clientWidth也就是元素内容的宽度，不包括滚动条的宽度。
- offsetHeight:包括元素的内容的高度，包括它border的宽度，不包括margin;clientWidth同理。
这两个值有个域的意义，必须算容器内部的元素内容的值，也就是说，当容器固定了高度，内容超出了，以容器为计算标准。
document.body.clientHeight
1097
document.body.offsetHeight
1097
//因为没有给body加边框，所以相等。加了就不一样了。
- scrollHeight:元素滚动内容的总长度：offsetHeight+margin——最根本在于内容变化，如果容器固定高度，内容超出，以最开始的margin和最底部的内容的外边距算。
- scrillTop: 滚动的高度。
- innerHeight: 窗口高度。
如何判断一个元素出现在了窗口中？
node.scrollHeight //滚动条高度+窗口高度
这时候，移动目标元素，当刚出现元素在窗口时：
node.scrollTop //滚动条滚动的距离
这时候，目标再滚动一个窗口的高度就会消失了。
所以，只要确保滚动条滚动的距离在这时候的node.scrollTop和其加上innerHeight的值之间就可以的。
如何判断是否滚动到页面底部？
node.scrollHeight - node.scrollTop < innerHeight
//近似可以判断了
HTMLCollection,NodelllList
基本没区别，区别就是方法不一样，NodeList有forEach,前者则没有。