DOM_基础介绍（一）

作者: mao77_ | 来源:发表于2019-02-09 19:22 被阅读0次

DOM_基础介绍（一）
Dom_事件流（二）
Dom_坐标属性及动画算子等（三）
RabbitMQ(一) - 基础介绍
RxAndroid：基础介绍（一）
Gradle基础介绍一
Terraform (一):基础介绍
ElasticSearch（一）基础介绍
RabbitMQ（一）、基础介绍
jmeter（一）基础介绍

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是单线程的。

事件机制
1. 需要做的事件放入到事件队列中，等待执行
2. 当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;
    }

DOM_基础介绍（一）
Dom_基础介绍（一） 1. window对象当访问window的属性和方法的时候，window可以省略 ECM...
Dom_事件流（二）
Dom_事件流（二）事件流的感念从外向内：捕获流网景公司的工程师认为，事件流应该是捕获流从内向外：冒泡流微软...
Dom_坐标属性及动画算子等（三）
Dom_坐标属性及动画算子等（三）事件对象中的坐标的几个属性 offsetX, offsetY 事件触发点相对于...
RabbitMQ(一) - 基础介绍
官网 http://www.rabbitmq.com/ 介绍 RabbitMQ是一个消息中间件，它接受和转发消息。...
RxAndroid：基础介绍（一）
前言# 在找工作的时候看到过有面试要求会RxJava + Retrofit，当时也没有太在意，正好新的工作中用的就...
Gradle基础介绍一
前言：文章内容摘自Android群英传：神兵利器。这里做一些简要的使用笔记。 Gradle是基于Groovy脚本语...
Terraform (一):基础介绍
参考文档：阿里云栖社区官方文档：Terraform官网一、Terraform 定义官方定义：传送门 Terra...
ElasticSearch（一）基础介绍
ElasticSearch介绍 Elasticsearch（ES）是一个基于Lucene构建的开源、分布式、RE...
RabbitMQ（一）、基础介绍
TL;DR RabbitMQ[https://www.rabbitmq.com/documentation.htm...
jmeter（一）基础介绍
一，优点开源工具，可扩展性非常好高可扩展性，用户可自定义调试相关模块代码精心简单的GUI，小巧灵活完全的可...

DOM_基础介绍（一）

Dom_基础介绍（一）

1. window对象

2. 计时器

setTimeout

setInterval

定时器的取消

3. HTML的node

常用的有5种节点

所有节点都有三个共同的属性

4. 获取元素节点的多种方式

5. HTML5新增的两个查找元素的利器

document.querySelector("")

document.querySelectorAll("")

6. 节点之间的关系

7. CSS的脚本化

查找css属性

8. 让元素动起来

9. 轮播图

10. 节点的创建

创建节点

插入节点

元素节点

文本节点

属性节点

12. 删除节点

13. 替换节点

14. copy节点

15. 属性节点

添加属性/修改属性

删除属性

查找属性

操作 Attribute

操作 property

16. 操作property

17. 一键换肤

18. innerHtml 和 innerText属性

innerHTML:

innerText: 慎用，兼容性也有点问题

19. outerHtml 和 outerText属性

outerHTML:

outerText: 慎用, 兼容性也有点问题.

20. checked属性

21.全选和反选案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读