|
1.DOM
?DOM : document object model ? ?操作页面标签和css
? ? ? ? ?DOM实际上是BOM的一部分
????????DOM基本操作
console.log(document) ;
console.log(document.documentElement) ; //html
console.log(document.body) ; //body
console.log(document.head) ; //head
console.log(document.title) ; //title
document.title = '百度一下' //title 是可读可写的
2.页面的几种宽高
clientWidth / clientHeight? ? ? ? 浏览器的可视宽高
scrollWidth /? scrollHeight? ? ? ? 浏览器的实际宽高
scrollTop /? ? ? scrollLeft? ? ? ? 页面被卷去的宽高
console.log(document.documentElement.clientWidth) ;
console.log(document.documentElement.clientHeight) ;
console.log(document.documentElement.scrollWidth) ;
console.log(document.documentElement.scrollHeight) ;
console.log(document.documentElement.scrollTop) ;
console.log(document.documentElement.scrollLeft) ;
//低版本IE的写法
//console.log(document.body.scrollTop) ;
//使用短路赋值
var root = document.documentElement || document.body ;
3.返回顶部
css样式部分：
<style>
body{
height: 3000px;
}
.a{
width: 130px;
height: 130px;
background-color: #f00;
position: fixed;
right: 0;
bottom: 0;
}
</style>
主要部分：
<body>
<div class="a"></div>
<script>
//获取元素
// ByClassName 得到的一定是一个数组，即使只有一个值也是数组
var oDivs = document.getElementByClassName('a');
console.log(oDivs) ;
console.log(oDivs[0]) ;
oDivs[0].onclick = function () {
var t = setInterval(function () {
document.documentElement.scrollTop -= 20 ;
// 滚动条所在的位置不一定能被20除
if(document.documentElement.scrollTop <= 0) {
clearInterval(t) ;
}
} , 10)
}
</script>
</body>
?防抖：
var oDivs = document.getElementsByClassName('a') ;
console.log(oDivs);
console.log(oDivs[0]);
var t ;
oDivs[0].onclick = function () {
clearInterval(t)
t = setInterval(function () {
document.documentElement.scrollTop -= 20 ;
// 滚动条所在的位置不一定能被20整除
if(document.documentElement.scrollTop <= 0) {
clearInterval(t)
}
},10)
}
节流：
var flag = true ;
oDivs[0].onclick = function () {
if(flag) {
flag = false ;
var t = setInterval(function () {
document.documentElement.scrollTop -= 5 ;
// 滚动条所在的位置不一定能被20整除
if(document.documentElement.scrollTop <= 0) {
clearInterval(t);
flag = true
}
},1)
}
}
4.判断到达底部
css样式：
<style>
body{
height: 3000px;
}
p{
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
display: none;
}
</style>
主要内容：
<body>
<p id="p">已经到达最底部了</p>
<script>
//拿对象
var oP = document.getElementbyId('p') ;
//这个计算如果写在事件里面每次触发都要不断的来计算，写在外部可以有效的减少计算的时间
//优化性能
//最大的滚动高度 = 页面的实际高度 - 浏览器的可视高度
var maxHeight = document.documentElement.scrollHeight ;
document.documentElement.clientHeight - 20 ;
//判断到达底部
var t ;
widow.onscroll = function () {
clearTimeout(t) ;
t = setTimeout(function () {
if(document.documentElement.scrollTop >= maxHeight){
console.log('到达底部了');
}
else{
oP.style.display = 'none' ;
}
},300)
}
</script>
</body>
5.获取元素
document.getElementById? ? ? ? 获取一个元素
document.getElementByClassName? ? ? ? ?class是关键字? ClassName? 获取一个元素集和
document.getElementsByName? ? ? ? 通过name属性获取元素集和（一般只有表单元素才有name属性）
document.getElementsByTagName()? ? ? ? 通过标签名获取元素集合
ES6新增的方法
? ? queryselectorAll()? ? ? ? 获取所有的元素集合? ?
? ? ?querySelector()? ? ? ? ? ?获取第一个元素
var oInps = document.getElementsByName('a') ;
console.log(oInps);
var oInps = document.querySelectorAll('input') ;
console.log(oInps);
var oDivs = document.querySelectorAll('.a') ;
console.log(oDivs) ;
var oDivs = document.querySelectorAll('div');
console.log(oDivs);
var oInp = document.querySelector('input:nth-child(2)') ;
console.log(oInp) ;
6.标签
标签内容
????????value ? 输入框的内容
? ? ? ? innerHTML ?标签的内容 ? 识别标签
? ? ? ? innerText ?标签的内容? ? ? ?不识别标签 --- 把标签当做了内容的一部分
var oDiv = document.querySelector('.a') ;
var content = '<span>呵呵<span>';
// oDiv.innerHTML = content;
oDiv.innerText = content;
标签的属性
获取标签的属性
? ? ? ? 获取所有的属性? ? ? ? attributes
? ? ? ? 获取指定的属性? ? ? ? getAttribute('?属性名 ')
? ? ? ? 添加指定的属性值? ? ? ? setattribute('?属性名? ' , '?属性值?')
? ? ? ? 删除指定的属性? ? ? ? ? ? removeAttribute('属性名' )
????????
? ? ? ? 简写
? ? ? ? ? ? ? ? 自有属性可以简写? ? ? ? oDiv.id? ? ? ? oDiv.className
? ? ? ? ? ? ? ? 自定义属性不能简写
var oDiv = document.querySelector('#a') ;
// attribute 属性：包括自有属性和自定义属性
// console.log(oDiv.attributes);
// console.log(oDiv.attributes.id); // id='a'
// console.log(oDiv.attributes.class); // class='b'
// console.log(oDiv.attributes.aa); // aa='a'
// 获取具体属性点 方法
console.log(oDiv.getAttribute('id')); // a
console.log(oDiv.getAttribute('class')); // b
console.log(oDiv.getAttribute('aa')); // a
// 添加属性
// setAttribute('属性名' , '属性值') 如果已经存在，就会产生覆盖
oDiv.setAttribute('class' , 'q')
// 删除属性
oDiv.removeAttribute('aa')
// 自有属性可以直接使用
console.log(oDiv.id);
oDiv.id = 'h'
console.log(oDiv.className); // class需要替换成className
// 自定义属性不能直接使用
// console.log(oDiv.vv);
特殊标签的属性：
? ? ? ? 表单上的自有属性也可以直接简写
? ? ? ? ? disabled = true / false
? ? ? ? ? checked = true / false
? ? ? ? ? selected = true / false
var oInp1 = document.querySelector('.inp1');
var oInp2 = document.querySelector('.inp2');
var oInp3 = document.querySelector('#a');
var oOptions = document.querySelectorAll('option');
setTimeout(function () {
oInp1.disabled = false
oInp2.checked = false
oOptions[1].selected = true
},1000)
标签的类名
? ? ? ?className 是一个字符串
? ? ? ? classList ?是一个伪数组
? ? ? ? ? ?.add() ?添加类名
? ? ? ? ? ?.remove() ?删除类名
? ? ? ? ? ?.replace() ?替换类名
<style>
.on{
color: red;
}
</style>
<div class="aon b">66</div>
<script>
var oDiv = document.querySelector('.b') ;
console.log(oDiv.className);
// oDiv.onclick = function () {
// var arr = oDiv.className.split(' ') ;
// console.log(arr);
// // 方法1：判断数组中是否存在这个类名，如果存在就要删除 indexOf splice
// if(arr.includes('on')) {
// // 方法2：把不包含on的值存入新的数组
// var arr2 = [] ;
// for(var i in arr) {
// if(arr[i] !== 'on') {
// arr2.push(arr[i])
// }
// }
// this.className = arr2.join(' ')
// }
// else {
// this.className += ' on' ;
// }
// }
// var list = oDiv.classList ;
// .add()
// .remove()
// .replace()
oDiv.onclick = function () {
if(this.className.includes(' on')) {
this.classList.remove('on')
} else {
this.classList.add('on')
}
}
</script>
标签的样式操作
? ? ? ? 样式操作
? ? ? ? ? 1 获取样式
? ? ? ? ? ? ? ?getComputedStyle(obj)['color']
? ? ? ? ? ? ? ?如果是行内样式 ?就可以直接获取 ? obj.style.color
? ? ? ? ? 2 设置样式
? ? ? ? ? ? ? ?obj.style.color = 'red' ;
? ? ? ? ? ? ? ?obj.style.cssText = 'color:red;width:100px;' ?--- 会覆盖之前的行内样式(不想覆盖就+=)
var oDiv = document.querySelector('.a') ;
// js动态添加的样式会以行内样式的形式出现
oDiv.style.color = 'red'
// 改为驼峰
oDiv.style.fontSize = '20px'
// js只能拿到行内样式
console.log(oDiv.style.color);
console.log(oDiv.style.height); // 非行内样式无法获取
// cssText给标签添加多个样式,但是会覆盖之前的行内样式
// oDiv.style.cssText += 'width:100px;height:100px;color:blue;'
// console.log(getComputedStyle(oDiv).height);
// console.log(getComputedStyle(oDiv)['height']);
// console.log(getComputedStyle(oDiv).color);
// currentStyle 只在IE8及以下可以识别
// console.log(oDiv.currentStyle.color);
function css(obj , prop) {
if(getComputedStyle) {
return getComputedStyle(obj)[prop]
}
return obj.currentStyle[prop]
}
console.log(css(oDiv , 'color'));
给标签设置样式
? ? ? ? 给标签添加样式
? ? ? ? ? 1 通过cssText添加
? ? ? ? ? 2 直接加类名
? ? ? ? ? 一般主要通过第二种方式更为方便
<style>
.a{
color: red;
width: 100px;
height: 100px;
background-color: #ff0;
}
</style>
var oH1 = document.querySelector('h1') ;
// oH1.style.cssText = 'color:red;width:100px;height:100px;background-color:#ff0';
oH1.classList.add('a')
点击切换效果
css样式
<style>
p{
display: flex;
}
span{
width: 40px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #000;
margin: 10px;
cursor: pointer;
}
.active{
border-color: red;
color: red;
}
</style>
主体内容：
<body>
<p>
<span>S</span>
<span>M</span>
<span>L</span>
<span>XL</span>
</p>
<script>
var oSpans = document.querySelectorAll('span') ;
// 循环绑定事件
// for(var i = 0 ; i < oSpans.length ; i++) {
// oSpans[i].onclick = function () {
// // 清除所有
// for(var j = 0 ; j < oSpans.length ; j++) {
// oSpans[j].classList.remove('active')
// }
// // 给当前对象添加
// this.classList.add('active') ;
// }
// }
for(var i = 0 ; i < oSpans.length ; i++) {
oSpans[i].onclick = function () {
if(this.className.includes('active')) {
this.classList.remove('active')
} else {
this.classList.add('active') ;
}
}
}
</script>
</body>
7.全选和反选
<input type="checkbox" class="all">
<br>
<input type="checkbox" class="one">
<input type="checkbox" class="one">
<input type="checkbox" class="one">
<script>
var oAll = document.querySelector('.all') ;
var oOnes = document.querySelectorAll('.one') ;
oAll.onclick = function () {
// if(oAll.checked === true) {
// oOnes[0].checked = true ;
// oOnes[1].checked = true ;
// oOnes[2].checked = true ;
// } else {
// oOnes[0].checked = false ;
// oOnes[1].checked = false ;
// oOnes[2].checked = false ;
// }
for(var i = 0 ; i < oOnes.length ; i++) {
oOnes[i].checked = oAll.checked ;
}
}
// 反选
// 循环绑定点击事件
// for(var i = 0 ; i < oOnes.length ; i++) {
// oOnes[i].onclick = function () {
// // 每一个单选都选中 全选才选中
// if(oOnes[0].checked && oOnes[1].checked && oOnes[2].checked) {
// oAll.checked = true
// } else {
// oAll.checked = false
// }
// }
// }
// for(var i = 0 ; i < oOnes.length ; i++) {
// oOnes[i].onclick = function () {
// var flag = true ;
// for(var j = 0 ; j < oOnes.length ; j++) {
// if(!oOnes[j].checked) {
// flag = false ;
// break ;
// }
// }
// // if(flag){
// // oAll.checked = true ;
// // } else {
// // oAll.checked = false ;
// // }
// oAll.checked = flag ;
// }
// }
// for(var i = 0 ; i < oOnes.length ; i++) {
// oOnes[i].onclick = function () {
// for(var j = 0 ; j < oOnes.length ; j++) {
// if(!oOnes[j].checked) {
// break ;
// }
// }
// // oAll.checked = j === oOnes.length ? true : false ;
// oAll.checked = j === oOnes.length
// }
// }
for(var i = 0 ; i < oOnes.length ; i++) {
oOnes[i].onclick = function () {
var count = 0 ;
for(var j = 0 ; j < oOnes.length ; j++) {
if(oOnes[j].checked) {
count++ ;
} else {
break ;
}
}
oAll.checked = count === oOnes.length
}
}
</script>
|