美文网首页
DOM_基础介绍(一)

DOM_基础介绍(一)

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

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. 获取元素节点的多种方式

  1. 根据id来获取
    • 给元素命名id的时候,理论不允许重复,如果有重复,找到的是第一个
  2. 根据className来查找元素
    • 得到的是多个元素组成大的一个类数组(array-like) //HTMLCollection
  3. 通过标签名来获取
    • 得到的也是多个元素组成的类数组(HTMLCollection)
  4. 通过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属性

  1. 获取行内属性
    • div.style.css属性名
    • div.style["css属性名"]
  2. 修改或添加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_基础介绍(一)

      本文链接:https://www.haomeiwen.com/subject/ahjzsqtx.html