typora-root-url: images
typora-copy-images-to: images
总结
BOM对象模型
window 子对象 document location(location.href location.reload ) history
window下的方法 alert() prompt cconfirm() open()
DOM 文档对象模型
根节点 html 子节点 body head 兄弟节点 父级节点
js中获取节点: getElementById() 返回节点
getElementsByClassName() 返回节点数组
getElementsByTagName() 返回节点数组
getElementsByName( ) 返回节点数组
querySelector() 返回节点
querySelectorAll() 返回节点数组
滚动条事件
onscroll 检测滚动条变化
document.documentElement.scrollTop 滚动条高度获取
document.documentElement.scrollLeft 滚动条距离左侧的距离获取
onresize 检测窗口大小的改变
第一节
DOM属性的基本操作
属性的定义
什么是元素的属性？class就是元素的属性，写在元素内的所有东西都是元素的属性，比如link的href，img的src等
元素的属性是什么，分为两种，一种叫内置属性，一种叫非内置属性。
内置属性的操作
innerHTML／innerText //返回值是当前元素的内容
id //返回值是当前元素的ID
title //获取title的标签值，这个title是从document中获取的
className //返回值是当前元素的class
href //返回值是当前的href的值
以上这些属性既可以获取，也可以设置
例1:获取下列表单的节点的各种值,并且进行修改
<div id="box" class="first" feng="admin">123</div>
<a href="lunaxiede" title="这是a" target="_blank">zheshia</a>
<img src="asd/asd/asdasdsa.jpg" alt="这是img的alt" title="这是图片"/>
<input type="text" name="user" id="user" value="" />
js获取节点的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box" class="first" feng="admin">123</div>
<a href="http://www.edrc.cn" title="这是a" target="_blank">zheshia</a>
<img src="asd/asd/asdasdsa.jpg" alt="这是img的alt" title="这是图片"/>
<input type="text" name="user" id="user" value="默认值" />
<script>
// 内置属性的获取
// 获取节点
// var divObj = document.getElementById('box');
// // console.log(divObj);
// // 获取节点的id
// console.log(divObj.id);
// // 获取class名称
// console.log(divObj.className);
// //修改class的名称
// divObj.className = 'one';
// // 修改id的名称
// divObj.id = 'poem';
// a标签属性的获取
// var aObj = document.getElementsByTagName('a')[0];
// // console.log(aObj);
// // 获取href属性
// console.log(aObj.href);
// //获取title
// console.log(aObj.title);
// console.log(aObj.target);
// // 获取a的文本内容
// console.log(aObj.innerHTML);
// console.log(aObj.innerText);
// // 修改a标签文本内容
// // aObj.innerHTML='<p>众生嚷嚷,皆为利来</p>';
// aObj.innerText='<p>众生嚷嚷,皆为利来</p>'; // 不能追加html标签
// 图片标签属性的获取
// var imgObj = document.getElementsByTagName('img')[0];
// // console.log(imgObj.src);
// imgObj.src='./6.jpg';
// imgObj.width = 100;
// input的操作
var inputObj = document.getElementById('user');
console.log(inputObj.value);
// 获取标签名称
console.log(inputObj.tagName);
// 标签名称是不允许改的
inputObj.tagName= 'iiii';
// value和innerHTML的区别
// value属性: input框
// innerHTML: 标签中包含的文本内容和标签
</script>
</body>
</html>
以上属性因为是标签固有的,所以可以直接使"."的方式调用.
非内置属性(自定义属性)
getAttribute(name)
描述：获取指定对象的属性名的属性值
返回：属性值
console.log(obox.feng) // 获取不到值
console.log(obox.getAttribute("feng"))
setAttribute(name,value)
描述：给指定对象设置属性名和属性值
参数：name指属性名，value指属性值
例如：divObj.setAttribute(‘one’,1);
obox.setAttribute("a","110")
obox.setAttribute("feng","root")
removeAttribute(name)：
描述：移除指定对象的属性
obox.removeAttribute("a")
例1:移除p中自定义的属性
<p goodsId='25'>因噎废食 </p>
节点公共的属性
[外链图片转存失败(img-WvCUVcG8-1567240552413)(/1564713467244.png)]
父节点.firstChild：返回第一个子节点,包含空白节点(文本节点)
.firstElementChild:返回第一个子节点
父节点.lastChild：返回最后一个子节点(包含空白)
lastElementChild 返回最后一个子节点(不包含空白)
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）
nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）(IE7/8不支持）
previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点),只读属性；(IE7/8不支持）
childNodes：返回子节点列表(包括,文本节点,注释节点)，返回时一个组数
children: 只返回元素节点
节点
parentNode：返回父节点
其他
nodeName：返回节点名字
nodeValue：返回节点值 （针对文本节点）
例1:获取suga文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>noodlle</li>
<li>fish</li>
<li>sugar</li>
</ul>
<script>
// document 表示文档本身
// console.log(document);
// 获取第一个子节点
// console.log(document.firstChild);
// 获取最后一个子节点
var htmlObj = document.lastChild;
// console.log(htmlObj);
// 获取body节点
var bodyObj = htmlObj.lastChild;
// console.log(bodyObj);
// 获取ul节点
var ulObj = bodyObj.firstChild;
// console.log(ulObj); // 会获取空白节点
// 使用不包好空白节点的获取方法
var ulObj1 = bodyObj.firstElementChild;
console.log(ulObj1);
//获取ul中的最后一个li
var liObj = ulObj1.lastElementChild;
// console.log(liObj);
// 返回节点名字
// console.log(liObj.nodeName);
// 获取最后一个li中文本节点
var textObj = liObj.firstChild;
// console.log(textObj);
// 返回节点的值
// console.log(textObj.nodeValue);
// 修改最后li中的内容,就是修改文本节点值
textObj.nodeValue = '赳赳老秦,共赴国难';
// ul兄弟节点的操作
var broObj =ulObj1.nextSibling; //包含空白节点
var broObj1 = ulObj1.nextElementSibling;
console.log(broObj);
console.log(broObj1);
// ul的父级节点
var bodyObj1 = ulObj1.parentNode;
console.log(bodyObj1);
</script>
</body>
</html>
练习
隔行变色
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active{
background: #ccc;
}
</style>
</head>
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</body>
<script type="text/javascript">
var ali = document.querySelectorAll("li")
for(var i=0;i<ali.length;i++){
if(i%2 == 0){
ali[i].className = "active";
}
}
</script>
</html>
进度条
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
margin: 50px auto;
}
.bar{
width: 0px;
height: 30px;
background: green;
border-radius: 6px;
position: absolute;
top: 135px;
line-height: 30px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<div class="bar">
<span>0%</span>
</div>
</div>
</body>
<script type="text/javascript">
var obar = document.querySelector(".bar")
var ospan = document.querySelector("span")
var w = 0;
var timer;
var speed = 7; //步长
var target = 400; //目标
timer = setInterval(function(){
if(w >= target){
// if(target - w < speed){
clearInterval(timer)
w = 400;
alert("BOOM")
}else{
w = w + speed;
}
ospan.innerHTML = parseInt((w/target)*100) + "%"
obar.style.width = w + "px";
},30)
</script>
</html>
第三节
节点的增删改查
节点创建
元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);
节点追加
父节点.appendChild(子节点); // 向父节点添加最后一个子节点
父节点.insertBefore(newnode,oldnode); // 将newnode放到oldnode的前边
节点删除
父节点.removeChild(子节点);
父节点.remove();
实现对元素的增删改查
<body>
<span>这是一个span</span>
<ul id="list">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</body>
<script type="text/javascript">
// 元素节点的增删改查
// 增
var div = document.createElement("div")
console.log(div)
document.body.appendChild(div)
div.innerHTML = "hahahaha"
div.className = "box";
// 删
// div.remove()
var ospan = document.querySelector("span")
// ospan.remove()
var olist = document.getElementById("list")
var oli2 = olist.children[1]
// oli2.remove()
olist.removeChild(oli2)
// 改
console.log(ospan.outerHTML)
ospan.outerHTML = "<em>" + ospan.innerHTML + "</em>";
</script>
CSS DOM(扩展)
功能：使js可以动态给HTML添加css样式属性 （行内样式）
语法：对象名.style.CSS属性转化为js后的名称 = 属性值;
例如：
color:red;
obj.style.color = ‘red’;
obj.style.background = ‘red url()’
obj.style.fontSize = ;
【CSS属性转化为js后的名称规则】
1、一个单词直接写，如：color，background，margin，width，height
2、多个单词，第二个单词去掉“-”并且“首字母大写”：
font-size => fontSize
font-family => fontFamily
border-width => borderWidth
案例:点击改变盒子的样式和内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">内容部分</div>
<button id="btn1">改变宽度</button>
<button id="btn2">改变高度</button>
<button id="btn3">改变颜色</button>
<button id="btn4">改变内容</button>
<script>
// 1 获取节点
var btn1Obj = document.querySelector('#btn1');
var boxObj = document.querySelector('#box');
// 2 绑定点击事件
btn1Obj.onclick = function(){
// 3 修改box的css的width
boxObj.style.width = '400px';
}
// 高度的改变
var btn2Obj = document.querySelector('#btn2');
btn2Obj.onclick = function(){
// 修改高度
boxObj.style.height = '400px';
}
// 颜色的修改
var btn3Obj = document.querySelector('#btn3');
btn3Obj.onclick = function(){
// 修改高度
boxObj.style.backgroundColor = 'yellow';
}
// 内容的修改
var btn4Obj = document.querySelector('#btn4');
btn4Obj.onclick = function(){
// 修改高度
boxObj.innerHTML = '朝闻道,夕死可矣';
}
</script>
</body>
</html>
脚下留心
1 通过js操作css样式时,一定要加px
boxObj.style.width = '400px';
2 通过js添加的样式都会以行内样式的方式追加
非行内样式的获取
现象
.test{
height:200px;
}
<div style="width:200px" class="test" id="id">asd</div>
在这个例子如果我们用 obj.style.height获取的数值将会为空，
a）在ie浏览器里，我们用到obj的currentStyle方法，来获取。 obj.currentStyle["height"]。
b)在非ie浏览器里，我们需要用到window自带的方法，getComputedStyle(obj).height;
这样我们就可以通过js获取元素属性了
综合写法:
获取非行内样式（兼容问题）
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
浏览器元素的尺寸
offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body
(与当前元素最近的经过定位(position不等于static)的父级元素)
offsetLeft：表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
offsetTop：表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
clientWidth/clientHeight：元素视窗宽度/高度
clientWidth = width+左右padding
clientHeight = height + 上下padding
offsetWidth/offsetHeight：元素实际宽度/高度
offsetWidth = width + 左右padding + 左右boder
offsetHeiht = height + 上下padding + 上下boder
[外链图片转存失败(img-5Gi4X75e-1567240552414)(/1560692509866.png)]
例题
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 100px;
background: red;
position: absolute;
top:40px;
left:40px;
padding: 20px;
border: solid 10px black;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var obox = document.getElementById("box")
// obox.offsetWidth = 400;
console.log(obox.offsetParent)
console.log(obox.offsetWidth)
console.log(obox.offsetHeight)
console.log(obox.offsetTop)
console.log(obox.offsetLeft)
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
</script>
</html>
第四节:实际应用
1．网页换肤
2．简易年历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }
.calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }
.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active p { font-weight: bold; }
.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }
</style>
</head>
<body>
<div id="tab" class="calendar">
<ul id="box">
<li><h2>1</h2><p>JAN</p></li>
<li class="active"><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text" id="txt">
<h2>1月活动</h2>
<p>快过年了，大家可以商量着去哪玩吧～</p>
</div>
</div>
</body>
<script type="text/javascript">
var arr=['快过年了，大家可以商量着去哪玩吧～',
'大家好好学习吧222222~~~',
'大家好好学习吧222222333~~~',
'大家好好学习吧222444222~~~',
'大家好好学习555吧222222~~~',
'大家好好学习吧666222222~~~',
'大家好好学习吧227772222~~~',
'大家好好学习吧28888822222~~~',
'大家好好学习吧99999222222~~~',
'大家好好学习10000000吧222222~~~',
'大家好好学习吧111111222222~~~',
'大家好好学习吧22222200000000000~~~']
// 点击月份,取消所有的当前项,给当前元素加上,根据月份找到数组中对应(根据索引对应)的数据
// 点击li时,找到当前点击的是当前li的索引
var aLi = document.querySelectorAll("#box li");
var oH2 = document.querySelector(".text h2")
var oP = document.querySelector(".text p")
// 1.绑定点击事件
for(var i=0;i<aLi.length;i++){
// 4.在点击事件外,还能拿到i的每个值的时候,将i的值依次绑定给每个元素
// aLi[i].feng = i;
aLi[i].setAttribute("feng",i)
aLi[i].onclick = function(){
// 2.取消所有的当前项
for(var j=0;j<aLi.length;j++){
aLi[j].className = "";
}
// 3.给当前元素加上
this.className = "active";
// 5.在点击事件内,通过this找到点击的元素,获取当前元素身上的自定义属性,拿到所谓的索引
var index = this.getAttribute("feng");
// 6.解析数据,渲染页面
oP.innerHTML = arr[index];
oH2.innerHTML = index-0+1 + "月活动";
}
}
// 异步
</script>
</html>
第五节
1．点击按钮换图片
知识点
事件（onmouseover）
函数
获取对象
修改对象属性
步骤
1、 给每个导航添加onmouseover事件（鼠标移入事件），调用changeImg()；
2、 创建changeImg()函数
获取img对象
修改img对象的src属性
<li class="current" onmousemove="changeImg(0)">
<a href="#" target="_blank">资讯</a>
</li>
<li class="current" onmousemove="changeImg(1)">
<a href="#" target="_blank">资讯</a>
</li>
<li class="current" onmousemove="changeImg(2)">
<a href="#" target="_blank">资讯</a>
</li>
<script>
function changeImg(num)
{
// alert(1);
/*
步骤
1、 给每个导航添加onmouseover事件（鼠标移入事件），调用changeImg()；
2、 创建changeImg()函数
获取img对象
修改img对象的src属性
*/
// 获取img对象
var imgOBj = document.getElementById('changeimg');
// 修改对象src属性
imgOBj.src = './style/img/lb'+ num +'.jpg';
}
</script>
2．tab切换案例
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.cont{width: 500px;height: 400px;margin: 20px auto;border: solid 1px black;}
.cont ul{display: flex;border-bottom: solid 1px black;box-sizing: border-box;height: 40px;}
.cont ul li{flex: 1;border-right: solid 1px black;text-align: center;font: 20px/40px "微软雅黑";}
.msg div{height: 360px;color: #fff;font:40px/360px "微软雅黑";display: none;}
.msg div:nth-child(1){background: green;}
.msg div:nth-child(2){background: red;}
.msg div:nth-child(3){background: blue;}
.cont li.active{background: #ccc;}
.cont div.active{display: block;}
</style>
</head>
<body>
<div class="cont">
<ul>
<li class="active">原点1</li>
<li>原点2</li>
<li>原点3</li>
</ul>
<div class="msg">
<div class="active"><img src=""/></div>
<div><img src=""/></div>
<div><img src=""/></div>
</div>
</div>
</body>
<script type="text/javascript">
var ali = document.querySelector("ul").children;
var adiv = document.querySelector(".msg").children;
for(var i=0;i<ali.length;i++){
ali[i].index = i;
ali[i].onclick = function(){
for(var j=0;j<ali.length;j++){
ali[j].className = "";
adiv[j].className = "";
}
this.className = "active";
adiv[this.index].className = "active"
}
}
</script>
</html>
.msg div:nth-child(3){background: blue;}
.cont li.active{background: #ccc;}
.cont div.active{display: block;}
</style>
</head>
<body>
<div class="cont">
<ul>
<li class="active">原点1</li>
<li>原点2</li>
<li>原点3</li>
</ul>
<div class="msg">
<div class="active"><img src=""/></div>
<div><img src=""/></div>
<div><img src=""/></div>
</div>
</div>
</body>
<script type="text/javascript">
var ali = document.querySelector("ul").children;
var adiv = document.querySelector(".msg").children;
for(var i=0;i<ali.length;i++){
ali[i].index = i;
ali[i].onclick = function(){
for(var j=0;j<ali.length;j++){
ali[j].className = "";
adiv[j].className = "";
}
this.className = "active";
adiv[this.index].className = "active"
}
}
</script>
1398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
