1.操作DOM的属性和方法
1.1.获取元素或元素集合
getElementById
-
上下文只是document(只有document这个实例的原型链上才能找到这个方法，其他实例都找不到)
-
ID重复了获取第一个
-
IE6~7中会把表单元素的name当做id使用
getElementsByTagName
-
获取当前上下文中，所有子子孙孙中标签名叫做xxx的元素
getElementsByClassName
-
IE6~8中不兼容
getElmentsByName
-
在IE浏览器中只对表单元素的name起作用
-
上下文也只能是document
querySelector
querySelectorAll
-
不兼容IE6~8
-
没有DOM映射
document.documentElement
document.body
document.head
........
1.2.描述节点和节点之间的关系的属性
| nodeType | nodeName | nodeValue | |
|---|---|---|---|
| 元素节点 | 1 | 大写标签名 | null |
| 文本节点 | 3 | #text | 文本内容 |
| 注解节点 | 8 | #comment | 注解内容 |
| 文档节点 | 9 | #document | null |
childNodes:所有子节点
children：所有元素子节点（IE6~8中会把注解当做元素节点）
parentNode
previousSibling/previousElmentString
nextSibling
firstChild
lastChild
1.3.动态操作DOM
createElement
createDocumentFragment
appendChild
insertBefore
cloneNode(true/false)
removeChild
set/get/removeAttribute
2.JS盒子模型属性
在JS中通过相关的属性可以获取（设置）元素的样式信息，这些属性就是盒子模型属性（基本上都是有关于样式的）
Client系列：
clientTop
clientLeft
clientWidth
clientHeight
offset系列：
offsetTop
offsetLeft
offsetWidth
offsetHeight
offsetParent
scroll系列：
scrollTop
scrollLeft
scrollWidth
scrollHeight
2.1.client系列
clientWidth&clientHeight
内容区+padding
//=>获取一屏幕（可视区）的宽高 document.documentElement.clientWidth || document.body.clientWidth document.documentElement.clientHeight ||document.body.clientHeight
clientTop & clientLeft:
获取（上/左）边框的宽度
2.2.offset系列
offsetWidth & offsetHeight：内容区+padding+border
offsetParent:当前盒子的父级参照物
offsetTop & offsetLeft:获取当前盒子距离其父级参照物的偏移量（上偏移/左偏移)，当前盒子的外边框开始到照物的内边框
参照物：同一个平面中，元素的父级参照物和结构没有必然联系，默认他们的父级参照物都是Body（当前平面最外层的盒子），body的父级参照物是null
2.3.scroll系列
scrollWidth & scrollHeight:
真实内容的宽高（不一定是自己设定的值，因为可能会存在内容溢出，有内容溢出的情况下，需要把溢出的内容计算在内）
在不同浏览器，或者是否设置overflow：hidden都会对最后的结果产生影响，所以这个值仅仅作参考，属于约等于的值
scrollTop & scrollLeft:滚动条卷去的宽度或者高度
最小卷去值：0
最大卷去值：document.documentElement.scrollHeight-document.documentElement.clientHeight
在JS盒子模型13个属性中，只有scrollTop、/scrollLeft是
可读写属性，其余都是只读属性
//=>获取当前页面的真是高度（包含溢出的部分） document.documentElement.scrollWidth || document.body.scrollWidth document.documentElement.scrollHeight||document.body.scrollHeight
2.4.特点
通过JS盒模型属性获取值得特点：
获取的都是数字不带单位
获取的都是整数，不会出现小数（一般都会四舍五入，尤其是获取的偏移量）
获取的结果都是符合样式值（好几个元素的样式组合在一起的值），如果只想获取单一样式值（例如：padding），我们的盒子模型属性就操作不了了
2.5.获取元素具体的某个样式值
1.[元素].style.xxx:
只能获取所有写在元素行内上的样式
2.获取当前元素所有经过浏览器计算的样式：
经过计算的样式：只要当前元素可以在页面中呈现（或者浏览器渲染它了），那么它的样式都是被计算过的
-
window.getComputedStyle([元素]，[伪类,一般都写null]):标准浏览器（IE9+）获取到当前元素所有被浏览器计算过的样式（对象）
-
[元素].currentStyle:IE6~8，获取经过计算的样式
案例：
封装一个获取，单个设置，多个设置样式属性
let utils=(function(){
let getCss=function(curEle,attr){
if('getComputedStyle' in window){
let val=window.getComputedStyle(curEle,null)[attr]
reg=/^-?\d+(\.\d+)?(px|rem|em|pt)?$/i
reg.test(val) ? val=parseFloat(val) :null
return val
}
return;
}
let setCss=function(curEle,attr,value){
if(attr==='opacity'){
curEle.style.opacity=value
curEle.style.filter=`alpha(opacity=${value * 100})`
return
}
if(!isNaN(value)){
let reg = /^(width|height|fontSize|((margin|padding)?(top|left|right|bottom)?))$/i;
reg.test(attr) ? value += 'px' : null;
}
curEle['style'][attr] = value
}
let setGrounpCss=function(curEle,options={}){
for (const key in options) {
if (object.hasOwnProperty(key)) {
setCss(curEle,key,options[key])
}
}
}
let css=function(...arg){
let len=arg.length,
fn=getCss;
len>=3 ? fn=setCss : null
len===2 && arg[1] instanceof Object ? fn=setGrounpCss : null
return fn(...arg)
}
return {
css
}
})()
For in循环：
遍历一个对象中的键值对，有多少组键值对，我们就遍历多少次；
for in 遍历的时候有自己的顺序：先遍历数字属性名（按照小->大），再遍历字符串属性名（按照书写顺序）;
for in 循环遍历当前对象可枚举的属性（包括私有属性，以及自己在类的原型上设置）
//=>先遍历数字属性
let obj={name:'zhangsan',age:18,1:2,source:80,2:4}
for(let key in obj){
console.log(key);//=>1,2,name,age,source
}
//=>类的原型上的属性也会变遍历出来
let obj={name:'zhangsan',age:18,1:2,source:80,2:4}
Object.prototype.getName=function(){
}
for(let key in obj){
console.log(key);//=>1,2,name,age,source,getName
}
//解决办法
for (const key in obj) {
//公有属性在最后遍历,这种可以屏蔽点公有属性
if (!obj.hasOwnProperty(key)) break;
console.log(key); //=>1,2,name,age,source
}
跑马灯：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 600px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.wrapper{
height: 300px;
width: 900px;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
.wrapper li{
height: 300px;
width: 100px;
text-align: center;
line-height: 300px;
list-style: none;
float: left;
}
.wrapper li:nth-child(3n+1){
background: red;
}
.wrapper li:nth-child(3n+2){
background: green;
}
.wrapper li:nth-child(3n+3){
background: blue;
}
</style>
</head>
<body>
<div class="container">
<ul class="wrapper">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<script src="./utils.js"></script>
<script>
let wrapper=document.querySelector('.wrapper')
wrapper.innerHTML+=wrapper.innerHTML
utils.css(wrapper,'width',utils.css(wrapper, 'width') * 2)
setInterval(()=>{
utils.css(wrapper,'left',utils.css(wrapper,'left')-2)
if(Math.abs(utils.css(wrapper,'left'))>=utils.css(wrapper,'width')/2){
utils.css(wrapper,'left',0)
}
},17)
</script>
</body>
</html>
珠峰视频笔录