JavaScript 04

JavaScript 04

 

目录

JavaScript 04

一、DOM

1. 概述

2. W3C DOM标准分类

二、核心DOM

1. Document：文档对象

2. Element：元素对象

#END

---

 

 

一、DOM

1. 概述

1.1 DOM：W3C（万维网联盟）的标准；

1.2 作用：定义了访问HTML和XML文档的标准；

1.3 DOM概念：是Document Object Model（文档对象模型缩写）；

1.4 DOM将标记语言文档的各个组成部分，封装为对象，可以使用这些对象对标记语言文档进行增删改查的动态操作；

2. W3C DOM标准分类

2.1 核心DOM：针对任何结构化文档的标准模型

分类：

① Document：文档对象；

② Element：元素对象；

③ Attribute：属性对象；

④ Text：文本对象；

⑤ Comment：注释对象；

⑥ Node：节点对象，其他五个的父对象；

2.2 XML DOM：针对XML文档的标准模型；

2.3 HTML DOM：针对HTML文档的标准模型；

 

二、核心DOM

1. Document：文档对象

1.1 创建方式：在 HTML DOM 模型中可以使用 window对象来获取；

（window对象的属性对于JavaScripte 为全局变量，写的一切代码相当于是写于window对象内部）

window.document; // 方法一
document; // 方法二

③ document.querySelector：传入参数类型为字符串，获样式如css选择器，取遇到的第一个DOM元素；

④ document.querySelectorAll：传入参数类型为字符串，样式如css选择器，获取所有匹配的DOM元素，返回值为一个数组；

1.2 方法：

1. 获取Element对象：

① getElementById()：根据id属性值获取元素对象，id属性值一般唯一；

② getElementByTagName()：根据元素名称获取对象们，返回值是一个数组；

③ getElementByClassName()：根据Class属性值获取元素对象们，返回值是一个数组；

④ getElementByName()：根据name属性值获取元素对象们，返回值是一个数组；

    <script>
        // ①
        var one = document.getElementById("one");
        // ②
        var div = document.getElementsByTagName("div");
        document.write(div.length + "<br>");
        // ③
        var three = document.getElementsByClassName("three");
        document.write(three.length + "<br>");
        // ④
        var four = document.getElementsByName("four");
        document.write(four.length + "<br>");
    </script>

    <input type="text" id="one">
    <div></div>
    <div></div>
    <div></div>
    <p name = "four"></p>
    <p name = "four"></p>
    <span class="three"></span><span class="three"></span><span class="three"></span><span class="three"></span>

2. 创建其他DOM对象：

① creatAttribute(name)

② creatComment()

③ creatElement()

④ creatTextNode()

    <script>
       var table = document.createElement("table");
       alert(table);
    </script>

2. Element：元素对象

2.1 创建/获取：通过document来获取和创建；

2.2 方法：

① removeAttribute()：删除属性；

② setAttribute()：设置属性；

    <a>请点击</a>
    <input type="button" id="set" value="设置属性">
    <input type="button" id="del" value="删除属性">

    <script>
       var set = document.getElementById("set");
       set.onclick = function() {
           var a = document.getElementsByTagName("a")[0];
           a.setAttribute("href","https://www.baidu.com");
       }

       var del = document.getElementById("del");
       del.onclick = function() {
           var a = document.getElementsByTagName("a")[0];
           a.removeAttribute("href");
       }
    </script>

 

设置后、删除后

#END