返回顶部

 

Dom
1、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合

b. 间接
tag = document.getElementById('i1')

parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

2、操作标签

a. innerText

获取标签中的文本内容
标签.innerText

对标签内部文本进行重新赋值

标签.innerText = ""

b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
tag.classList.contains('样式名') 判断是否存在这个样式结果为布尔值
PS：

<div onclick='func();'>点我</div>
<script>
function func(){

}

</script>

c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true

返回顶部：

function GoTop() {
// 返回顶部
window.scrollTo(0,0);
console.log('瞬间返回顶部')
}
function GoTop1() {

//返回顶部动画版本

var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16);
console.log('返回顶部动画版本')
}

//返回顶部流畅版本

function GoTop2() {
//返回顶部流畅版本
(function smoothscroll() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo(0, currentScroll - (currentScroll / 5));
}
})();
console.log('返回顶部流畅版')
}