一、定时器方法
定时器方法：setInterval. window对象的方法。直接调用。
作用：用于间隔执行某个函数。
语法：setInterval(callback,time);
callback：可以是有名函数的名字，或者是匿名函数。
time：callback 函数被间隔执行的时间，单位毫秒。
返回：返回定时器对象编号。该编号是唯一的。是一个整数。
定时器编号是一个从1开始的自然数。递增的。
如果想停止定时器函数。clearInterval(timer);
timer：想要停止的定时器的编号。
注意：定时器对象可以设置任意个。
定时器方法和循环使用的区别：
1：定时器方法是异步的。循环是同步的。
2：定时器回调的函数可以指定间隔的时间，循环没有办法指定循环间隔执行的时间。
3：定时器方法的停止需要依赖于clearInterval方法。循环的结束依赖于
break，或者是循环条件。
<button id="start">开始点名</button>
<button id="stop">停止点名</button>
<script>
//每隔一秒页面随机输出一个学生的名字
function test() {
//获得页面元素
var btn = document.getElementById ("start");
var stop = document.getElementById("stop");
var timer = 0;
const INTERVAL = 100;
var stopTimer = [];
//开始按钮
btn.onclick = function () {
// if(timer >0 )
// return;
timer = setInterval (shwoRandomName,INTERVAL);
stopTimer.push(timer);
console.log (timer);
}
//停止按钮
stop.onclick = function () {
while(stopTimer.length > 0){
clearInterval(stopTimer.pop());
}
}
};
var shwoRandomName = function () {
var names = ["洋洋", "小朱", "小超", "小亚", "阔气"];
var index = ~~(Math.random () * names.length);
//获得span
var span = document.querySelector ("span");
span.innerHTML = names[index];
}
shwoRandomName();
test();
</script>
二、DOM操作行内样式
DOM 操作css行内样式
通过修改元素对象的style属性来实现对元素样式的修改。
语法：
设置：
元素对象.style.css样式名 = 样式值;
获得
元素对象.style.css样式名
注意：
使用js获得和修改元素对象的样式属性通过style属性。如果样式名由多个单词构成
不能使用- 中划线 分隔，使用驼峰命名法。
style的一个属性：
style.cssText : 得到的是元素对象的样式的字符串表示形式。
补充：元素对象.style.css样式名 = 样式值; 这种方式没设置一个样式，就会造成页面重新的渲染。
通过 元素对象.style.cssText = “全部样式内容”；只会产生一次的重绘。效率更好。
<script>
var box = document.getElementById("box");
//获得div的样式
console.log (box.style.width);//200px
console.log (box.style.height);//200px
console.log (box.style.backgroundColor);//red
//设置
box.style.width = "100px";
box.style.height = "100px";
box.style.fontSize = "70px";
box.style.backgroundColor = "#ffffff";
box.style.textAlign = "center";
box.style.lineHeight = box.style.height;
//
/* width: 100px; height: 100px; background-color: rgb(255, 255, 255); font-size: 20px; border: 1px solid black; text-align: center; line-height: 100px;*/
console.log (box.style.cssText);
//通过cssText，修改样式。之前的内容会被覆盖掉。
box.style.cssText = "width: 200px; height: 200px; background-color: rgb(255, 255, 255);";
box.style.cssText += "line-height: 200px;";
box.style.cssText += "text-align: center;";
//随机的得到一个颜色
var randomColor = function () {
var ran = ~~(Math.random()*(0xffffff+1));
var hexColor = '#'+ran.toString(16);
box.style.backgroundColor = hexColor;
};
//需求：每隔100ms随机设置div的背景色
var timer = setInterval(randomColor,100);
</script>
三、通过style的方法来操作样式
通过style样式对象的方法来操作元素的样式
1:设置样式：元素.style.setProperty(样式名,样式值).
2:获得样式：元素.style.getPropertyValue(样式名)
3:删除样式: 元素.style.removeProperty(样式名)
注意：样式名，如果多个单词，使用中划线分隔。
<script>
//获得div
var div = document.querySelector ("div");
div.innerHTML = "上课别睡觉";
//添加设置样式
div.style.width = "200px";
div.style.setProperty ("height", "200px");
div.style.setProperty ("background-color", "red");
div.style.setProperty("border","solid black 1px");
div.style.setProperty("font-size","40px");
div.style.setProperty("text-align","center");
div.style.setProperty("line-height","200px");
setProperty(div,"color","orange");
//获得样式
console.log (div.style.getPropertyValue("width"));
//删除样式
div.style.removeProperty("border");
function setProperty(ele,cssName,cssValue) {
ele.style.setProperty(cssName,cssValue);
}
</script>
四、内部样式和外部样式的获取
重点：
内部样式和外部样式的获得：
语法：window.getComputedStyle(元素对象)
返回：返回元素对象的样式表声明对象。然后再通过点语法去访问具体的属性。
该方法在IE的低版本存在兼容问题。IE8及其以下不支持。
IE8及其低版本使用元素对象的属性。
元素对象.currentStyle 返回元素对象的样式表对象。
然后再通过点语法来访问具体的样式属性即可。
如果想在不同的浏览器下都可以获得元素对象的样式，需要考虑兼容的写法。
<div id="box">都精神点</div>
<script>
var box = document.getElementById ("box");
//获得box的样式表声明对象
/*var styles = window.getComputedStyle(box);
console.log (styles);
//访问具体的样式属性,内部的和外部的。
console.log (styles.width);
console.log (styles.backgroundColor);
console.log (styles["height"]);
console.log (styles["fontSize"]);*/
//console.log (box.currentStyle);
/**
* 获得指定的元素上的指定的样式属性
* @param ele
* @param cssName
*/
function getStyle(ele, cssName) {
if (ele.currentStyle === undefined) {
return window.getComputedStyle (ele)[cssName];
}
return ele.currentStyle[cssName];
}
//兼容的写法-2 推荐使用的
function getStyle(ele, cssName) {
//大多数浏览器兼容的写法
if (window.getComputedStyle) {
return window.getComputedStyle (ele)[cssName];
}
//IE低版本支持的方法
return ele.currentStyle[cssName];
}
//兼容的写法-3
function getStyle(ele, cssName) {
return window.getComputedStyle ? window.getComputedStyle (ele)[cssName] : ele.currentStyle[cssName];
}
console.log (getStyle (box, "width"));
console.log (getStyle (box, "fontSize"));
</script>
五、DOM常用方法-creatElement-appendChild
DOM常用方法：
1：createElement(标签)
作用：创建元素对象的。
语法：document.createElement(标签名)
标签名大小写不敏感。
2：appendChild(元素)
作用：将元素对象添加到当前对象的最后。
语法：父对象.appendChild(对象)
<script>
//创建一个div对象，设置一些样式，添加到页面中
//div在内存中。
var div = document.createElement("div");
div.style.width = "300px";
div.style.height = "300px";
div.style.fontSize = "20px";
div.style.backgroundColor = "pink";
div.style.textAlign = "center";
div.style.lineHeight = "300px";
div.innerHTML = "立秋了，不要再吃西瓜了！";
//将div添加到body中
document.body.appendChild(div);
</script>
六、appendChild的特殊用法
appendChild 的特性：
具有移动元素节点的特性。
<ul>
<li id="li1">111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
var ul = document.querySelector("ul");
var li1 = document.getElementById("li1");
//将第一个子元素移动到了末尾
ul.appendChild(li1);
</script>
七、createTextNode
了解：
createTextNode：
作用：创建文本节点的。作用和innerText、textContent基本一致。
语法：document.createTextNode(文本)；
<script>
var span = document.createElement("span");
var text = document.createTextNode("hello");
span.appendChild(text);
document.body.appendChild(span);
</script>
八、insertBefore
insertBefore:
作用：在指定的元素节点前插入指定的元素对象。
语法：父元素.insertBefore(newEle,oldEle)
补充：insertBefore 具有将元素前移的特性。
具体看下面的实例代码。将li5移动到了最前的位置。
<ul>
<li id="li1">111</li>
<li>222</li>
<li id="li3">333</li>
<li>444</li>
<li id="li5">555</li>
</ul>
<script>
//获得父元素对象
var ul = document.querySelector("ul");
//创建要插入的li
var newLi = document.createElement("li");
newLi.innerHTML = "I am the new li";
var li3 = document.getElementById("li3");
ul.insertBefore(newLi,li3);
//获得最后一个li
var li5 = document.getElementById("li5");
var li1 = document.getElementById("li1");
ul.insertBefore(li5,li1);
</script>
九、removeChild
removeChild：
作用：删除子节点对象。
语法：父元素.removeChild(childEle)；
返回：返回被删除的对象。
<ul>
<li id="li1">111</li>
<li>222</li>
<li id="li3">333</li>
<li>444</li>
<li id="li5">555</li>
</ul>
<script>
//删除内容为444的元素
var ul = document.querySelector("ul");
//返回被删除的元素
var element = ul.removeChild(ul.lastElementChild.previousElementSibling);
console.log (element);
</script>
十、cloneNode
cloneNode：
作用：复制元素节点对象的。
语法：被复制对象.cloneNode(布尔值)；
参数：参数要求是一个布尔值，如果是true，意味着是深度的复制，会复制被复制对象的内容及其子元素内容。如果是false，那么就是浅复制，不复制子元素。
返回：被复制的对象。f
注意：被复制对象上的事件不能被克隆。
<script>
//创建个div，设置内容，设置样式，添加单击事件，每点击一次，复制一个div出来，添加到当前页面中
var div = document.createElement ("div");
div.innerHTML = "hello";
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
div.style.border = "solid 1px";
document.body.appendChild (div);
//添加单击事件
div.onclick = function () {
var cloneNode = div.cloneNode (Math.random () >= 0.5);
document.body.appendChild(cloneNode);
}
</script>
十一、创建表格练习
练习：创建一个5行1列的表格。
给表格添加基本的样式。
给每一行也添加适当的样式
每一行的内容依次为1,2,3,4,5
添加到body对象中。
将第一行移动到末尾，将第四行移动到第一行。
<script>
//创建table，设置基本样式
var table = document.createElement ("table");
table.style.border = "solid 1px";
table.style.textAlign = "center";
//使用循环，创建5个tr，5个td，将td添加到tr中。tr添加到table中。
for (let i = 0; i < 5; i++) {
let tr = document.createElement ("tr");
//设置tr的id
tr.id = "tr" + (i+1);
tr.style.height = "30px";
let td = document.createElement ("td");
td.style.width = "50px";
td.style.border = "solid 1px";
td.innerHTML = i + 1;
tr.appendChild(td);
table.appendChild(tr);
}
document.body.appendChild(table);
//将第一行移动到末尾，
var tr1 = document.getElementById("tr1");
// 将第四行移动到第一行。
var tr4 = document.getElementById("tr4");
table.insertBefore(tr4,tr1);
//将第一行移动到末尾，
table.appendChild(tr1);
</script>
十二、replaceChild
replaceChild:
作用：替换元素。
语法：父元素.replaceChild(newEle, oldEle)
返回：被替换掉的元素。
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
//创建一个li替换到最2 的li
var newLi = document.createElement("li");
newLi.innerHTML = "I am the new li";
//获得父元素
var ul = document.querySelector("ul");
var ele = ul.replaceChild(newLi, ul.firstElementChild.nextElementSibling);
console.log (ele);
</script>
十三、contains
contains：
作用：用于判断一个对象是否包含另外一个对象的？
语法：对象.contains(对象)
返回：如果包含，返回true，否则false。
<div id="father">
<div id="son"></div>
</div>
<span></span>
<script>
var father = document.getElementById("father");
var son = document.getElementById("son");
var bool = father.contains(son);
console.log (bool);//true
var span = document.querySelector("span");
var result = father.contains(span);
console.log (result);//false
</script>
十四、hasChildNodes
hasChildNodes:
作用：用于判断当前对象是否包含子元素。
语法：对象.hasChildNodes()
返回：如果有子元素，返回true，否则false。
<div id="father">
<div id="son"></div>
</div>
<script>
var father = document.getElementById("father");
var son = document.getElementById("son");
console.log (father.hasChildNodes());//true
console.log (son.hasChildNodes());//false
</script>
十五、isEqualNode
isEqualNode:
作用：用来判断两个对象是否相等的。
语法：对象1.isEqualNode(other);
返回：相等返回true，不相等返回false。
自己和自己比较：true
深度复制比较：true
浅复制比较：false。
事件不会影响比较结果。
<div id="box">
hello
</div>
<script>
var div = document.getElementById("box");
console.log (div.isEqualNode(div));//true
div.onclick = function () {
console.log ("hello");
};
var div1 = div.cloneNode(true);
//深度复制比较，结果为true
console.log (div.isEqualNode(div1));//true
//浅复制和自身比较，是false
console.log (div.cloneNode(false).isEqualNode(div));//false
</script>
十六、DOM元素对象常用属性
DOM元素常用属性：offsetParent （偏移参照物、偏移对象）
找到偏移对象的规则：
1：对于一个元素来说，如果直接父元素是body，那么该元素对象的offsetParent就是body对象。
2: 对于一个元素来说，如果直接父元素不是body，而且它的所有的父元素都没有定位。那么
该元素的offsetParent也是body对象.
3: 对于一个元素来说，如果直接父元素不是body，而且它的父元素有定位。那么
该元素的offsetParent是父元素中距离它最近的而且有定位属性的父元素。
元素的常用属性：
offsetLeft: 当前对象距离当前对象的偏移对象的左边界的距离。
offsetTop：当前对象距离当前对象的偏移对象的上边界的距离。
<style>
#father{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid;
position: relative;
}
#son{
width: 100px;
height: 100px;
background-color: blue;
text-align: center;
line-height: 100px;
border: 1px solid;
margin-top: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
hello
</div>
</div>
<script>
var father = document.getElementById("father");
var son = document.getElementById("son");
console.log (father.offsetParent);//body
console.log (son.offsetParent);//father。
console.log (father.offsetLeft);//8
console.log (father.offsetTop);//8
console.log (son.offsetLeft);//20
console.log (son.offsetTop);//10
</script>
十七、DOM元素常用属性-offsetWidth-offsetHeight-clientWidth-clientHeight
属性：
offsetWidth: 元素的宽度（受边框、内边距、滚动条的影响）（不受外边距的影响）
offsetHeight：元素的高度（受边框、内边距、滚动条的影响）（不受外边距的影响）
clientWidth: 元素的宽度（不受边框、外边距、滚动条的影响）（受内边距的影响）
clientHeight：元素的高度（不受边框、外边距、滚动条的影响）（受内边距的影响）
offsetWidth、offsetHeight：以边框为最边界的元素的宽度和高度。
clientWidth、clientHeight：背景色填充的，可以看见的区域的宽高。视口的宽高。
总结：如果想获得元素占据的空间的大小：offsetWidth、offsetHeight
如果想得到元素视口的大小：clientWidth、clientHeight。
<style>
div{
width: 200px;
height: 200px;
border: solid 2px;
background-color: chocolate;
padding: 20px;
margin: 30px;
overflow: scroll;
}
</style>
</head>
<body>
<div>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div>
<br>
<br>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
var div = document.querySelector("div");
console.log ("offsetWidth =" + div.offsetWidth);
console.log ("offsetHeight = " + div.offsetHeight);
console.log ("clientWidth =" + div.clientWidth);
console.log ("clientHeight = " + div.clientHeight);
console.log (document.body.clientWidth);
console.log (document.body.clientHeight);
//得到浏览器视口的宽高
console.log (document.documentElement.clientWidth);
console.log (document.documentElement.clientHeight);
</script>
46
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
