属性操作
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,前者则没有。
网友评论