DOM元素的属性和其他操作

2017-09-14 本文已影响0人流着万条永远的河

属性操作

getAttribute()获取元素的属性值

同样的还有：

createAttribute()
setAttribute()
removeAttribute()

var node =document.Element('div')
node.setAttribute('my-attrib','newval')
//相当于先创建属性，再设值了

在html中有：
<a href="#">haha</a>
//我想把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 += '<li>' +item +'<li>'
})
html    //"<li>1</li><li>2</li><li>3</li>"
document.querySelector(.navbar).innerHTML = html
document.querySelector(.navbar)     //修改html，把字符串放到html上，当成标签并执行。

与之对应的是innerText:
标签下的文本内容。
document.querySelector(.navbar).innerText = html
"<li>1</li><li>2</li><li>3</li>"      //页面出现了这些，以文本 形式，并不执行。

innerHTML有安全问题，数据一定不要是用户填写的：

var navbarDate = [1,2,3,'<script>alert(1)</script>']
然后script标签的内容会被执行的。

所以，最好的还是，创建DOM节点，用innerText调文本，然后放到页面上。

使用方式

设置样式style

node.style.color ='red'
node.style.backgroundColor = ''blue''
document.querySelector('#hello').style.backgroundColor = 'black'    //就是操作页面上的ＤＯＭ节点上的style属性
//<p id="hello" style="background-color: red">ahhaahha</p>一般权重是最高的，其他地方除非有!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的新增和删除实现。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
.box{
  border:1px solid #222;
  padding: 10px;
  box-shadow:1px 1px 2px 2px rgba(0,0,0,.14);
}
.box.active{
  color: #fff;
  background: #000;
}
</style>
</head>
<body>
  <div class="box">
 <h1>hahaha</h1>   
<p>hello</p>
  </div>
<button class="add">add</button>
  <button class="remove">remove</button>
  <button class="toggle1">toggle1</button>
  <button class="toggle2">toggle2</button>
<script>
var addbtn = document.querySelector('.add')
var rembtn = document.querySelector('.remove')
var tog1btn = document.querySelector('.toggle1')
var tog2btn = document.querySelector('.toggle2')
var boxPanel = document.querySelector('.box')

addbtn.onclick = function(){
  boxPanel.classList.add('active')  
}
rembtn.onclick = function(){
  boxPanel.classList.remove('active')
}
tog1btn.onclick = function(){
  if(boxPanel.classList.contains('active')){
    boxPanel.classList.remove('active')
  }else{ 
    boxPanel.classList.add('active')
  }

}
tog2btn.onclick =function(){
  boxPanel.classList.toggle('active')
}
</script>
</body>
</html>

页面宽高，内容，滚动条

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