DOM元素的属性和其他操作

属性操作

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的新增和删除实现。

  
  
  



  

 
hahaha
   
hello
  
add
  remove
  toggle1
  toggle2

页面宽高，内容，滚动条

• 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,前者则没有。