Dom_基础介绍(一)
1. window对象
当访问window的属性和方法的时候,window可以省略
-
ECMAScript
- 标准
-
BOM
- Browser Object Model 游览器对象模型
- BOM没有标准,各大游览器厂商自己来实现
- 不涉及到具体的页面内容
-
DOM
- Document Object Model 文档对象模型
- w3c标准
var a = 10;
function foo(){
console.log(a)
}
console.log(a);
console.log(window.a);
foo();
window.foo();
2. 计时器
js只有一个线程在工作,js是单线程的。
-
事件机制
- 需要做的事件放入到事件队列中,等待执行
- 当Js引擎空闲的时候,会直接从队列中取出事件,然后去执行
- 定时器:就是用来把事件放入到事件队列中
setTimeout
// 在函数内书写你要执行的代码
/*
过1000ms之后, 把这个函数放入到事件队列中.
*/
console.log("a")
setTimeout(function (){
console.log("b");
}, 0);
console.log("c"); // a c b
setTimeout(function step(){
box.innerHTML = new Date();
setTimeout(step, 1000);
}, 0);
setInterval
setInterval(function (){
console.log(new Date());
}, 1000);
var arr = ["你好", "你好呀", "你好1", "你好2"]
var index = 0;
window.setInterval(function (){
// index = index == arr.length ? 0 : index;
alert(arr[index++ % arr.length]);
}, 100);
定时器的取消
- clearTimeout()
- clearInterval()
<button id="btn1">开启定时器</button>
<button id="btn2">取消定时器</button>
<script>
var timeoutId;
var intervalId;
btn1.onclick = function (){
/*timeoutId = setTimeout(function (){
alert("set time out ....");
}, 2000);*/
intervalId = setInterval(function (){
alert("abc");
}, 1000)
}
btn2.onclick = function (){
// 清除定时器. 只有在定时时间到之前取消才有用.
// clearTimeout(timeoutId);
clearInterval(intervalId);
}
3. HTML的node
一共有12种节点
常用的有5种节点
- **Element** 1
```
<div id="box">aaaaa</div>
<script>
var box = document.getElementById("box");
console.log(box.nodeType); // 1
console.log(box.nodeName); // 元素名:DIV
console.log(box.nodeValue); // null
```
- **Attribute** 2
```
<div id="box">aaaaa</div>
<script>
var attrNode = box.getAttributeNode("id");
console.log(attrNode.nodeType); // 2
console.log(attrNode.nodeName); // 属性名
console.log(attrNode.nodeValue); // 属性值
```
- **Text** 3
```
<div id="box">aaaaa</div>
<script>
var textNode = box.firstChild;
console.log(textNode.nodeType); // 3
console.log(textNode.nodeName); // #text
console.log(textNode.nodeValue); // 文本的内容
```
- **Comment** //注释8
- **Document** 9
```
// document:
console.log(document.nodeType); // 9
console.log(document.nodeName); // #document
console.log(document.nodeValue); // null
```
所有节点都有三个共同的属性
- nodeName : 节点名
- nodeType : 节点类型
- nodeValue : 节点值
4. 获取元素节点的多种方式
- 根据id来获取
- 给元素命名id的时候,理论不允许重复,如果有重复,找到的是第一个
- 根据className来查找元素
- 得到的是多个元素组成大的一个类数组(array-like) //HTMLCollection
- 通过标签名来获取
- 得到的也是多个元素组成的类数组(HTMLCollection)
- 通过name属性的值来获取
- 用的不太多,一般用来查找表单元素,通过name来查找
<div id="box" class="r">abc</div>
<p class="r">aaa</p>
<span class="r">span</span>
<div></div>
<div></div>
<input type="checkbox" name="loves">打游戏
<input type="checkbox'" name="loves">上网
<script>
// var box = document.getElementById("box");
// console.log(box);
// var eles = document.getElementsByClassName("r");
// for(var i = 0; i < eles.length; i++){
// console.log(eles[i]);
// }
// var divs = document.getElementsByTagName("div");
// console.log(divs);
var loves = document.getElementsByName("loves");
console.log(loves[0]);
5. HTML5新增的两个查找元素的利器
document.querySelector("")
只能找到满足选择器的第一个元素
document.querySelectorAll("")
找到满足选择器的所有的元素
- 返回值是一个类数组(NodeList 节点列表)
<p>
<a href="">aaaa</a>
</p>
</div>
<a href="">bbbb</a>
<p class="abc"></p>
<script>
// var a = document.querySelector("div p a");
// var a = document.querySelector("abc");
// var a = document.querySelectorAll("div p a");
console.log(document.querySelector(".abc"));
// console.log(a);
6. 节点之间的关系
ul.childNodes|找到所有的子节点(任何类型的子节点都会包含在内)
---|---
ul.firstChild|获取第一个子节点
ul.lastChild|获取最后一个子节点
li.nextSibling|下一个兄弟
li.previousSibliing|一个兄弟
parentNode|父节点
-|-
children|获取到所有的元素子节点
firstElementChild|第一个元素
lastElementChild|最后一个元素节点
nextElementSibling|下一个兄弟
previousSibling|上一个兄弟
parentElement|父节点
7. CSS的脚本化
用js代码去操作css的样式
查找css属性
- 获取行内属性
- div.style.css属性名
- div.style["css属性名"]
- 修改或添加css属性
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div style="width: 200px;"></div>
<script>
var div = document.querySelector("div");
// var style = getComputedStyle(div, null);
/*var style = div.currentStyle;
console.log(style);
console.log(style["width"]);
console.log(style.height);*/
/*
获取一个css属性的值
参数1: 元素
参数2: css属性的名
*/
function getValue(ele, cssPropName){
if (window.getComputedStyle){
return window.getComputedStyle(ele, null)[cssPropName]
}else{
return ele.currentStyle[cssPropName]
}
}
function getValue1(ele, cssPropName){
var style = window.getComputedStyle
? window.getComputedStyle(ele, null) //不是伪元素就传递null
: ele.currentStyle;
return style[cssPropName];
}
function getValue2(ele, cssPropName){
return window.getComputedStyle
? window.getComputedStyle(ele, null)[cssPropName]
: ele.currentStyle[cssPropName];
}
console.log(getValue2(div, "width"));
console.log(getValue2(div, "height"));
<button id="btn">给div添加样式</button>
<div></div>
<script>
var btn = document.querySelector("#btn");
var box = document.querySelector("div");
btn.onclick = function (){
box.style.width = 100 + "px";
box.style.height = "100px";
box.style.backgroundColor = "pink";
}
8. 让元素动起来
- 原理:利用定时器来修改元素的相关属性大的值,时间根据实际情况来定
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div");
var left = 0;
var id = setInterval(function (){
left += 1;
div.style.left = left + "px";
if(left >= 1000){
clearInterval(id);
}
}, 10);
9. 轮播图
<style>
.lbt {
width: 600px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
position: relative;
}
.lbt div.imgs {
width: 3600px;
height: 400px;
position: absolute;
}
.lbt div img {
width: 600px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div class="lbt">
<div class="imgs">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
</div>
<script>
var imgs = document.querySelector("div.imgs");
var left = 0;
var time = 10; //定时器的时间
var direction = -1; // -1表示向左, 1表示向右
setTimeout(function step(){
left += 6 * direction;
direction = left == -3000 || left == 0 ? direction * -1 : direction;
time = left % 600 == 0 ? 1000 : 10;
imgs.style.left = left + "px";
setTimeout(step, time);
}, 10)
10. 节点的创建
创建节点
- 通过js来动态的创建节点
- 创建元素节点: document.createElement()
- 创建文本节点: document.createTextNode("文本值")
插入节点
- 把节点追加到元素中的最后位置: dom元素.appendChild(child)
- 插入到之前: parent.insertBefore(newNode, otherNode)
- parent.insertBefore(newNode, null) === parent.appendChild(newNode)
<ul>
<li>css</li>
<li class="item">html</li>
<li>script</li>
</ul>
<script>
var item = document.querySelector(".item");
var li = document.createElement("li");
li.appendChild(document.createTextNode("query"));
item.parentElement.appendChild(li);
btn.onclick = function () {
// item.parentElement.insertBefore(item, item.previousElementSibling);
item.parentElement.insertBefore(item, item.nextElementSibling == null
? item.parentElement.firstElementChild
: item.nextElementSibling.nextElementSibling);
}
元素节点
文本节点
属性节点
12. 删除节点
只能通过父节点删除子节点。
item.parentElement.removeChild(item);
<button id="btn">删除元素</button>
<ul>
<li class="item2">html</li>
<li>css</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script>
var item2 = document.querySelector(".item2");
var ul = document.querySelector("ul");
btn.onclick = function (){
if (ul.firstElementChild){
ul.removeChild(ul.firstElementChild);
}
}
// item2.parentElement.parentElement.removeChild(item2.parentElement);
// item2.parentElement.removeChild(item2); // 干掉自己的儿子
// item2.remove(); // 自杀 兼容性非常差,非常不建议使用
13. 替换节点
- 参数1: 新的节点
- 参数2: 被替换掉的节点
<ul>
<li class="item2">html</li>
<li>css</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script>
var ul = document.querySelector("ul");
var p = document.createElement("p");
// 参数1:新的节点 参数2:被替换掉的节点
ul.replaceChild(p, ul.firstElementChild);
14. copy节点
- 参数: 布尔值,true表示深度克隆,后代一起克隆。
- false(或不传)表示只克隆元素自己, 后代不要
<ul>
<li class="item2" id="li1">html
<a href="#">abc</a>
<p>这是个段落</p>
</li>
<li>css</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script>
var item2 = document.querySelector(".item2");
// 参数:布尔值, true表示深度克隆, 后代一起克隆 false(或不传)表示只克隆元素自己, 后代不要
var newNode = item2.cloneNode(true);
item2.parentElement.appendChild(newNode);
15. 属性节点
创建属性节点:
- var attrNode = document.createAttribute(属性名)
添加属性节点 修改属性节点
- div.setAttributeNode(attrNode);
删除属性节点
- div.removeAttributeNode(attrNode)
查找属性节点:
- div.getAttributeNode(属性名)
<div class="div1"></div>
<script>
var div = document.querySelector("div");
var idNode = document.createAttribute("id"); // 创建属性节点
idNode.nodeValue = "box"; // 属性节点的nodeValue就是属性的值
// 给一个元素添加(设置)属性节点
div.setAttributeNode(idNode);
//找到属性节点
var classNode = div.getAttributeNode("class");
div.removeAttributeNode(classNode);
添加属性/修改属性
- div.setAttribute(attrNode)
删除属性
- div.removeAttribute(attriNode)
查找属性
- div.getAttribute(属性名)
<div class="div1"></div>
<script>
var div = document.querySelector("div");
div.setAttribute("id", "box"); // 添加属性
// div.setAttribute("class", "div2") // 更改属性
// div.removeAttribute("class"); // 删除属性
console.log(div.getAttribute("class")); // 获取class属性的值
操作 Attribute
div.getAttribute("id")
setAttribute()
removeAttribute()
操作 property
input.value
id
className
...
- 操作这两种在99%的情况都是一样的
- 如果attribute的值和名一样的时候,映射成property时候,就成了布尔值了.
-
比如:
- 操作checked的时候,应该使用 property
<button>获取用户的输入</button>
<input type="text" value="abcd">
<input type="checkbox" checked="checked">
<script>
var btn = document.querySelector("button");
var input = document.querySelector("input");
btn.onclick = function (){
var v = input.getAttribute("value");
alert(v);
}
</script>
16. 操作property
<div id="box" class="item">nihao</div>
<script>
var div = document.querySelector("div");
console.log(div.id); //box
div.id = "box1";
console.log(div.className); //item
console.log(div.tagName); //DIV 对元素来说完全等价于 === node.nodeName
17. 一键换肤
div{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: pink;
}
.style1{
width: 200px;
height: 300px;
border: 10px solid #000;
background-color: red;
}
.style2{
width: 100px;
height: 300px;
border: 10px solid blue;
background-color: black;
}
.style3{
width: 500px;
height: 300px;
border: 10px solid green;
background-color: #aaaa00;
}
</style>
</head>
<body>
<div class="a"></div>
<script>
var div = document.querySelector("div");
var ss = [" style1", " style2", " style3"];
var index = 0;
div.onclick = function (){
div.className = ss[index++ % ss.length];
}
18. innerHtml 和 innerText属性
innerHTML:
- 设置:
- 给它赋值字符串,如果字符串中有标签,游览器会当作标签给解析出来
- 实现删除的功能,有一些性能问题,有可能会导致内存溢出
- 读取:
- 可以把标签内部的所有内容作为一个字符串返回
innerText: 慎用,兼容性也有点问题
- 设置:
- 设置的所有内容都当做一个普通的字符串来对待, 即使有标签
- 也是作为字符串来处理
- 读取:
- 只读取内部的文本, 标签部分省略.
<div>
<p>第一个p</p>
<p>第二个p</p>
<p></p>
<a href="">aaa</a>
</div>
<script>
var div = document.querySelector("div");
console.log(div.innerText);
// div.innerText = "<ul><li>abc</li><li>bcd</li></ul>";
// div.innerHTML = "<ul><li>abc</li><li>bcd</li></ul>";
// div.innerHTML = ""; //删除
// console.log(div.innerHTML);
</script>
19. outerHtml 和 outerText属性
outerHTML:
-
读取:
- 把整个标签和他的后代一起作为一个字符串返回
-
设置:
- 把整个标签一起替换掉.
- 一般不用, 一般还是用innerHTML
outerText: 慎用, 兼容性也有点问题.
-
设置:
- 把自己和后代一起用纯字符串替换掉.
-
读取:
- 和innerText效果一样
<div>
<p>第一个p</p>
<p>第二个p</p>
<p></p>
<a href="">aaa</a>
</div>
<script>
var div = document.querySelector("div");
console.log(div.outerText);
div.outerText = "<p>abc</p>"
// console.log(div.outerHTML);
// div.outerHTML = "<ul></ul>";
20. checked属性
<button id="btn">获取状态</button>
<input type="checkbox" checked>
<script>
var input = document.querySelector("input");
btn.onclick = function (){
console.log(input.checked); // property
/*console.log(input.getAttribute("checked"));*/ // null
}
</script>
21.全选和反选案例
<body>
<label>全选<input type="checkbox" id="all"></label>
<label>反选<input type="checkbox" id="inverse"></label>
<br>
<br>
<label>看电影<input type="checkbox" class="hobby"></label>
<label>看书<input type="checkbox" class="hobby"></label>
<label>写字<input type="checkbox" class="hobby"></label>
<label>吃饭<input type="checkbox" class="hobby"></label>
<label>打豆豆<input type="checkbox" class="hobby"></label>
<script>
var all = document.querySelector("#all");
var inverse = document.querySelector("#inverse");
var hobbys = document.querySelectorAll(".hobby");
var countTrue = 0;
//给全选按钮添加事件
all.onchange = function(){
//根据全部按钮的状态来决定每个爱好的状态
for(var i=0; i<hobbys.length; i++){
hobbys[i].checked = all.checked;
}
calc(); //计算选中的按钮的个数
}
inverse.onchange = function () {
// 反选按钮,把各自的状态取反之后再设置回去
for(var i=0; i<hobbys.length; i++){
hobbys[i].checked = !hobbys[i].checked;
}
calc();
changeAll(); //更改全选按钮的状态
}
for(let i=0; i<hobbys.length; i++){
hobbys[i].onchange = function () {
// if(hobbys[i].checked){
// countTrue++;
// }else {
// countTrue--;
// }
calc();
changeAll(); //更改全选按钮的状态
}
/*allLoves[i].onchange = (function (i){
return function (){
console.log(allLoves[i].checked);
}
})(i);*/
}
// 更改全选按钮的状态
function changeAll() {
if(countTrue == 5){
all.checked = true;
}else {
all.checked = false;
}
}
// 计算选中的个数
function calc() {
var count = 0;
for(var i=0; i<hobbys.length; i++){
if(hobbys[i].checked){
count++;
}
}
countTrue = count;
}
网友评论