JavaWeb 速通DOM

简介: JavaWeb——JS内容补充 DOM的原理和使用。

目录

一、DOM快速入门

       1.基本介绍 :

       2.Document :

           1° 简介

           2° 常见方法表

二、DOM应用实例

       1.弹出窗口案例 :

           代码演示 :

           运行效果(如下GIF图):

       2.多选框案例 :

           代码演示 :

           运行效果 : (如下GIF图)

       3.图片切换案例 :

            代码演示 :

            运行效果(如下GIF图所示):

       4.动态增加图片案例 :

           代码演示 :

           运行效果 :(如下GIF图)

三、DOM节点

       1.html dom说明 :

       2.节点常用属性和方法 :

               1° 常用属性

               2° 常用方法

       3.获取节点 :

               1° 代码演示:

               2° 运行结果:(如下GIF图)

四、DOM总结


一、DOM快速入门

       1.基本介绍 :

       (1) DOM全称是Document Object Model文档<--->对象模型,就是把文档中的标签,属性,文本等转换成为对象来管理。

       (2) 文档会被映射为一棵由多个对象组成的有层次结构的树来进行管理,这就是DOM机制

       (3) DOM也可分为HTML DOM, CSS DOM, 以及XML DOM。

       最重点的是html DOM;当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。html dom树如下图所示 :

image.gif 编辑

       2.Document :

           1° 简介

       (1) document 管理了所有的 HTML 文档内容
       (2) document 是一种有层级关系的树结构的文档。
       (3) 在dom中,所有的标签都对象化。只要得到标签对应的dom对象,就可以通过dom对象的属性和方法来控制标签的展现方式。注意文档本身是静态的,没有变化, 通过程序改变的只是在浏览器内存中的元素.
       (4) 通过 document 可以访问所有的标签对象

          2° 常见方法表

               查找 HTML 元素 :

方法 描述
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素

               改变 HTML 元素 :

方法 描述
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式

               添加和删除元素 :

方法 描述
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流

               添加事件处理程序 :

方法 描述
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

二、DOM应用实例

       1.弹出窗口案例 :

           代码演示 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first application</title>
    <script type="text/javascript">
        //Dynamic register
        window.onload = function () {
            var button_1 = document.getElementById("button_1");
            button_1.onclick = function () {
                //获取button_1dom对象对应的标签,所包含的文本内容
                alert(button_1.innerText);      //innerText,强调文本
                alert(button_1.innerHTML);      //innerHTML,强调标签
            }
        }
    </script>
</head>
<body>
    <button id="button_1"><span>Cyan_RA9</span></button>
    <p>点击按钮来获取它的值</p>
</body>
</html>

image.gif

           运行效果(如下GIF图):

image.gif编辑

       2.多选框案例 :

           代码演示 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Second application</title>
</head>
<script type="text/javascript">
    function selectAll() {
        //获取到fruit这组复选框
        var fruits = document.getElementsByName("fruit");  //fruits是一个NodeList,即是一个集合。
        for (var i = 0; i < fruits.length; ++i) {
            fruits[i].checked = true;
        }
    }
    function selectNone() {
        var fruits = document.getElementsByName("fruit");
        for (var i = 0; i < fruits.length; ++i) {
            fruits[i].checked = false;
        }
    }
    function selectReverse() {
        var fruits = document.getElementsByName("fruit"); 
        for (var i = 0; i < fruits.length; ++i) {
            fruits[i].checked = !fruits[i].checked;
        }
    }
</script>
<body>
    <span>你喜欢吃的水果:</span> <br/>
    <input type="checkbox" name="fruit" value="grape"/>Grape
    <input type="checkbox" name="fruit" value="watermelon"/>Watermelon
    <input type="checkbox" name="fruit" value="strawberry"/>Strawberry
    <input type="checkbox" name="fruit" value="blueberry"/>Blueberry <br/><br/>
    <button onclick="selectAll()">全选</button>
    <button onclick="selectNone()">全不选</button>
    <button onclick="selectReverse()">反选</button>
</body>
</html>

image.gif

           运行效果 : (如下GIF图)

image.gif编辑

       3.图片切换案例 :

            代码演示 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Third application</title>
    <script type="text/javascript">
        function changeImages() {
            //getElementsByTagName方法可以通过标签名来获取对应的dom对象。
            var images = document.getElementsByTagName("img");
            var input1 = document.getElementById("input1");
            if (input1.value == "点击将蓝色矢车菊切换为粉色") {
                for (var i = 0; i < images.length; ++i) {
                    images[i].src = "../../../cornflower/" + (i+4) + ".jpg";
                }
                input1.value = "点击将粉色矢车菊切换为蓝色";
            } else if (input1.value == "点击将粉色矢车菊切换为蓝色") {
                for (var i = 0; i < images.length; ++i) {
                    images[i].src = "../../../cornflower/" + (i+1) + ".jpg";
                }
                input1.value = "点击将蓝色矢车菊切换为粉色";
            }
        }
    </script>
</head>
<body>
    <img src="../../../cornflower/1.jpg" height="100px"/>
    <img src="../../../cornflower/2.jpg" height="100px"/>
    <img src="../../../cornflower/3.jpg" height="100px"/> <br/>
    <input type="button" value="点击将蓝色矢车菊切换为粉色" id="input1" onclick="changeImages()"/>
</body>
</html>

image.gif

            运行效果(如下GIF图所示):

image.gif编辑

       4.动态增加图片案例 :

           代码演示 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fourth application</title>
    <script type="text/javascript">
        /*
            Δ注意:创建新的图片不是修改,而是增加!
            因此,此处要要用documentDOM对象的createElement方法。
         */
        var addCornFlower = function () {
            //在浏览器内存中"创建"<img/>元素
            var img = document.createElement("img");
            img.src = "../../../cornflower/4.jpg";
            img.width = "100";
            //利用appendChild方法"添加"HTML元素 (将创建的img元素挂载到dom树上)
            document.body.appendChild(img);
        }
    </script>
</head>
<body>
    <input type="button" value="点击添加一朵矢车菊" onclick="addCornFlower()"/>
</body>
</html>

image.gif

           运行效果 :(如下GIF图)

image.gif编辑


三、DOM节点

       1.html dom说明 :

       HTML DOM(文档对象模型)中,每个部分都是节点,即一切都可看作是Node

       1) 文档本身是文档节点

       2) 所有 HTML元素是元素节点

       3) 所有 HTML属性是属性节点

      4) HTML 元素内的文本是文本节点

       5) 注释是注释节点

       若想查看具体的Element的属性和方法,可以查看——

HTML DOM Element 对象

       2.节点常用属性和方法 :

               1° 常用属性

       1. childNodes 属性,获取当前节点的所有子节点

       2. firstChild 属性,获取当前节点的第一个子节点

       3. lastChild 属性,获取当前节点的最后一个子节点

       4. parentNode 属性,获取当前节点的父节点

       5. nextSibling 属性,获取当前节点的下一个节点 (后一个)

       6. previousSibling 属性,获取当前节点的上一个节点 (前一个)

       7. className 用于获取或设置标签的class属性值

       8. innerHTML 属性,表示获取/设置起始标签和结束标签中的内容

       9. innerText 属性,表示获取/设置起始标签和结束标签中的文本

               2° 常用方法

       getElementsByTagName(tagName)方法,获取指定标签名的dom对象;通过具体的元素节点调用该方法,可获取当前节点的指定标签名的孩子节点,返回HTMLCollection类型

       appendChild(ChildNode ) 方法,可以添加一个子节点(将指定节点挂载到dom树上),ChildNode 是要添加的孩子节点。

       getElementById(id)方法,通过id来获取指定节点,返回HTMLXxxElement类型

       getElementsByName(name)方法,通过name属性值来获取指定节点,可用于获取一组复选框(同一name值),返回NodeList类型

       3.获取节点 :

               1° 代码演示:

               界面如下 :

image.gif编辑

               通过id获取对应按钮的dom对象,然后通过dom对象.onclick = function() {} 来给dom对象绑定点击事件,通过编写代码,实现不同按钮的功能。

               代码如下 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>methods to get Nodes</title>
    <style type="text/css">
        body {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        button {
            width: 220px;
            height: 30px;
            margin-bottom: 10px;
            text-align: left;
        }
        #btnList {
            float:left;
        }
        #total{
            width: 450px;
            float:left;
        }
        ul{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .inner li{      /* 后代选择器,表示是.inner中的li标签 */
            border: 1px darkblue dashed;
            padding: 5px;
            margin: 5px;
            float:left;     //让无序列表的元素依次排在一块儿
        }
        .inner{
            width:400px;
            border:2px cornflowerblue solid;
            /*border-width: 2px;*/
            margin-bottom: 10px;
            padding: 10px;
            float: left;
        }
    </style>
    <script type="text/javascript">
        //动态绑定事件
        window.onload = function () {
            //1.查找 id=java 节点
            var btn_1 = document.getElementById("btn_1");
            btn_1.onclick = function () {
                var java = document.getElementById("java");
                alert("java节点的文本内容 = " + java.innerText);
            }
            //2.查找所有 option 节点
            var btn_2 = document.getElementById("btn_2");
            btn_2.onclick = function () {
                var options = document.getElementsByTagName("option");
                alert("options = " + options);   //HTMLCollection
                for (var i = 1; i < options.length; ++i) {
                    alert("innerText = " + options[i].innerText)
                }
            }
            //3.查找 name=fruit 的节点
            var btn_3 = document.getElementById("btn_3");
            btn_3.onclick = function () {
                var fruits = document.getElementsByName("fruit");
                alert("fruits = " + fruits);        //NodeList
                for (var i = 0; i < fruits.length; ++i) {
                    if (fruits[i].checked) {
                        alert("fruits[" + i + "] = " + fruits[i].value);
                    }
                }
            }
            //4.查找 id=language 下所有 li 节点
            var btn_4 = document.getElementById("btn_4");
            btn_4.onclick = function () {
                //此处缩小了dom对象的范围!
                var lis = document.getElementById("language").getElementsByTagName("li");
                alert("lis = " + lis);     //HTMLCollection
                for (var i = 0; i < lis.length; ++i) {
                    alert("lis[" + i + "] = " + lis[i].innerText);
                }
            }
            //5.查找 id=sel_1 的所有子节点
            /* PS:
                (1)下拉框的所有子节点————认为<br/>换行也是一个子节点(文本类型)。
                (2)可以通过childNodes属性来获取当前节点的所有子节点。
                (3)可以通过selected属性来对获取到的节点进行过滤。
             */
            var btn_5 = document.getElementById("btn_5");
            btn_5.onclick = function () {
                var sel_1 = document.getElementById("sel_1");
                alert("sel_1 = " + sel_1);              //object HTMLSelectElement
                var childNodes = sel_1.childNodes;
                alert("childNodes = " + childNodes);    //NodeList
                alert("childNodes' length = " + childNodes.length);
                for (var i = 0; i < childNodes.length; ++i) {
                    if (childNodes[i].selected) {
                        alert(childNodes[i].innerText); //Text | HEMLOptionElement
                    }
                }
            //方式二:
            /*
                由于sel_1是HTMLSelectElement,本身具有集合的特性,
                浏览器在解析时会想当然地认为<select>下有<option>元素,因此可直接通过下标来访问。
             */
                for (var i = 0; i < sel_1.length; ++i) {
                    alert("sel_1[" + i + "] = " + sel_1[i].innerText);
                }
            }
            //6.查找 id=sel_1 的第一个子节点
            //PS : firstChild属性是按照childNodes属性得到的第一个字节点。
            var btn_6 = document.getElementById("btn_6");
            btn_6.onclick = function () {
                var firstChild = document.getElementById("sel_1").firstChild;
                alert("sel_1's firstChild = " + firstChild.innerText);
                alert("sel_1's firstChild = " + sel_1[0].innerText);
            }
            //7.查找 id=java 的父节点
            var btn_7 = document.getElementById("btn_7");
            btn_7.onclick = function () {
                var java = document.getElementById("java");
                alert("java = " + java);                //HTMLLIElement
                var javaParent = java.parentNode;
                alert("javaParent = " + javaParent);    //HTMLUListElement
                for (var i = 0; i < javaParent.childNodes.length; ++i) {
                    alert(javaParent.childNodes[i].innerText);
                }
            }
            //8.查找 id=moderate 的前后兄弟节点
            var btn_8 = document.getElementById("btn_8");
            btn_8.onclick = function () {
                var moderate = document.getElementById("moderate");
                alert("moderate = " + moderate);        //object HTMLOptionElement
                alert("moderate = " + moderate.innerText);
                alert(moderate.previousSibling.previousSibling.innerText);
                alert(moderate.nextSibling.nextSibling.innerText);
            }
            //9.读取 id=moderate 的 value 属性值
            var btn_9 = document.getElementById("btn_9");
            btn_9.onclick = function () {
                var moderate = document.getElementById("moderate");
                alert(moderate.value);
            }
            //10.设置 #person 的文本域
            var btn_10 = document.getElementById("btn_10");
            btn_10.onclick = function () {
                var person = document.getElementById("person");
                person.innerText = "My name's Cyan, nice to meet you!";
            }
        }
    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            The FRUIT you relish:
        </p>
        <input type="checkbox" name="fruit" value="grape" checked="checked">Grape
        <input type="checkbox" name="fruit" value="strawberry">Strawberry
        <input type="checkbox" name="fruit" value="blueberry">blueberry <br/>
        <hr/>
        <p>
            What about your health state?
        </p>
        <select id="sel_1">
            <option>--健康状况--</option>
            <option>牛逼</option>
            <option id="moderate" value="good">害⭐</option>
            <option>飞舞</option>
        </select>
        <hr/>
        <p>
            The processing language you master:
        </p>
        <ul id="language">
            <li id="java">Java</li>
            <li>C</li>
            <li>C++</li>
            <li>Python</li>
        </ul> <br/><br/>
        <hr/>
        <p>
            Self-introduce.
        </p>
        <textarea name="person" id="person">个人介绍</textarea>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn_1">查找 id=java 节点</button>
    </div>
    <div>
        <button id="btn_2">查找所有 option 节点</button>
    </div>
    <div>
        <button id="btn_3">查找 name=fruit 的节点</button>
    </div>
    <div>
        <button id="btn_4">查找 id=language 下所有 li 节点</button>
    </div>
    <div>
        <button id="btn_5">查找 id=sel_1 的所有子节点</button>
    </div>
    <div>
        <button id="btn_6">查找 id=sel_1 的第一个子节点</button>
    </div>
    <div>
        <button id="btn_7">查找 id=java 的父节点</button>
    </div>
    <div>
        <button id="btn_8">查找 id=moderate 的前后兄弟节点</button>
    </div>
    <div>
        <button id="btn_9">读取 id=moderate 的 value 属性值</button>
    </div>
    <div>
        <button id="btn_10">设置 #person 的文本域</button>
    </div>
</div>
</body>
</html>

image.gif

               2° 运行结果:(如下GIF图)

               PS : GIF演示时间较长(2mins)

image.gif编辑


四、DOM总结

       重点要掌握——

      DOM的机制 : 将文档映射成由一个个具有层次关系的节点组成的树;html文档本身被映射为文档节点,而html文档内的元素和属性,以及元素内的文本,均可被映射为dom对象,而dom对象就是树上的一个节点(or 结点)。获取某个dom对象后,可以通过事件绑定(事件注册)来控制该对象的展现方式,而有了dom机制的加持,可以通过某一个节点(某一个dom对象)来获取其他的节点,便于控制和管理。(html dom树的演示图要熟记)

       DOM常用的属性和方法:像是getElementById,getElementsByTagName等等,要熟练运用。

       DOM本身并不是当前的主流工具,但是DOM机制是Vue的底层支撑,原理要清楚。

      System.out.println("END---------------------------------------------------------------------");

目录
相关文章
|
6月前
|
XML JavaScript 前端开发
Javaweb之javascript的DOM对象的详细解析
1.5.3 DOM对象 1.5.3.1 DOM介绍 DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
67 0
|
XML JavaScript 前端开发
【JavaWeb】知识总结Ⅳ(JavaScript中的DOM)
JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除已有的 HTML 元素和属性 JavaScript 能添加新的 HTML 元素和属性 JavaScript 能对页面中所有已有的 HTML 事件作出反应 JavaScript 能在页面中创建新的 HTML 事件
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
28天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
8天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
8天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
18天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
17天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
19天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)