HTML 学习笔记 JavaScript (DOM)

一 DOM 简介

通过HTML DOM 可以访问JavaScript 文档的所有元素

当网页被加载的时候，浏览器会创建页面的文档对象模型

HTML DOM 模型被构造成对象的树

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常通过JavaScript 你需要操作HTML元素为了做到这件事情你必须查找到该元素。通常有三种方法可以做到这件事：

1.通过id找到HTML元素：

使用方法getElementById() 参数就是你要查找的元素的id名称。

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p id="pid">这是一段话</p>

        <script>

            var p = document.getElementById("pid");

            function changep() {

//                p.innerHTML = "我是改变后的段落";

                p.innerText = "哈哈哈哈哈"

            }

        </script>

        <button type="button" onclick="changep()">改变</button>

    </body>

</html>

这里要说一下innerHTML和innerText 的区别。在上面这个例子中是看不出来区别的我们可以再看一个例子。

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="divId">

            <p>这是段落</p>

        </div>

        <script>

            var p = document.getElementById("divId");

            function changep() {

                alert(p.innerHTML);

                alert(p.innerText);

            }

        </script>

        <button type="button" onclick="changep()">改变</button>

    </body>

</html>

运行后可以看到第一次提示的是<p>这是段落</p> 第二次提示的是"这是段落"，也就是说p.innerHTML = <p>这是段落</p>；p.innerText = 这是段落。可以看出innerHTML取出的是该标签的元素，而innerText取出的是该标签的文本内容。

2:根据标签名找到HTML元素：使用方法getElementsByName();由于name在HTML文档中不是唯一的，所以取出来的是个数组。

实例：

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p id="p1">我是一个p</p>

        <p id="p2">我是第二个p</p>

        <input type="text" name="userName"/>

        <input type="button" value="确定" onclick="fun1()">

        <script>

            var p = document.getElementsByName("userName");

            function fun1() {

                alert(p[0].value)

            }

        </script>

        <button type="button" onclick="changep()">改变</button>

    </body>

</html>

使用getElementsByTagName() 根据HTML标签名获取元素节点，返回的是一个NodeList对象，可以根据索引取出来其中的一个可以遍历输出。关于节点这个概念可以先了解一下后面会有相关的博客讲解。

根据DOM HTML 文档中的每个成分都是一个节点。HTML为跟节点。

DOM是这样规定的：

整个文档是一个文档节点

每个HTML元素是一个元素节点

包含在HTML元素中的文本是文本节点

每一个HTML属性是一个属性节点

注释属于注释节点

看一个例子吧：

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="divId">

            <p>今天周六哎</p>

            <p>你竟然在加班 鄙视你</p>

        </div>

        <button id="buttonId">测试</button>

        <script>

            //获取所有的p节点

            var pList = document.getElementsByTagName("p");

            function alertToUser() {

                alert(pList[0].innerText);

                alert(pList[1].innerText);

            }

            document.getElementById("buttonId").addEventListener("click", alertToUser);

        </script>

    </body>

</html>

使用getElementsByClassName() 根据class获取元素节点

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div class="divId">

            <p>今天周六哎</p>

            <p>你竟然在加班 鄙视你</p>

        </div>

        <button id="buttonId">测试</button>

        <script>

            //获取所有的p节点

            var pList = document.getElementsByClassName("divId");

            function alertToUser() {

                alert(pList[0].innerHTML);

            }

            document.getElementById("buttonId").addEventListener("click", alertToUser);

        </script>

    </body>

</html>

JavaScript中的CSS选择器

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="div1">

            <p id="p1" class="class1">

                    我是第一个P

            </p>

                <p id="p2" class="class2">

                    我是第二个P

                </p>

        </div>

        <script>

            var node = document.querySelector("#div1 > p");

            alert(node.innerHTML);

            var node1 = document.querySelector(".class2");

            alert(node1.innerHTML);

            var nodelist = document.querySelectorAll("p");

            alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML);

        </script>

    </body>

</html>

通过以上方法可以获取我们想要操作的HTML 元素我们可以改变该元素的文本他内容也可以改变该元素的一些属性
:举个例子看一看

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            div {

                position: relative;

                width: 170px;

                height: 30px;

            }

            #changeP {

                margin: 6px auto;

                position: absolute;

                left: 10px;

            }

            #changeImg {

                position: absolute;

                margin: 6px auto;

                right: 10px;

            }

            button {

                border-radius: 4px;

                background: orange;

                border-style: none;

            }

        </style>

    </head>

    <body>

        <p id="pId">双休日上班很烦躁哎</p>

        <img id="imageId" src="../img/bottom.png" />

        <div>

            <button id="changeP">改变文本内容</button>

            <button id="changeImg">改变图片</button>

        </div>

        <p></p>

        <script>

            //获取所有的p节点

            var p = document.getElementById("pId");

            var img = document.getElementById("imageId");

            var isChange = true;

            function alertToUser() {

                if (p.innerText == "双休日上班很烦躁哎") {

                    p.innerText = "吼吼哈嘿";

                }else {

                    p.innerText = "双休日上班很烦躁哎";

                }

            }

            function changeImage() {

                if (isChange) {

                    img.src = "../img/top.png";

                    isChange = false;

                }else {

                    img.src = "../img/bottom.png";

                    isChange = true;

                }

            }

            document.getElementById("changeImg").addEventListener("click",changeImage);

            document.getElementById("changeP").addEventListener("click", alertToUser);

        </script>

    </body>

</html>

获取到元素后改变元素的样式：

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        *{

            margin: 30px;

        }

            p {

                color: blue;

            }

        </style>

    </head>

    <body>

        <p id="changeColor">我本来的颜色是蓝色的 </p>

        <script>

            var p = document.getElementById("changeColor");

            p.style.transform = "rotate(45deg)";

            p.style.color = "red";

        </script>

    </body>

</html>

文档结构和遍历

(1)作为节点数的文档

1.parentNode 获取该节点的父节点

2.childNodes 获取该节点的子节点数组

3.firstChild 获取该节点的第一个子节点

4.lastChild 获取该节点的最后一个子节点

5.nextSibling 获取该节点的下一个兄弟元素

6.previoursSibling 获取该节点的上一个节点的兄弟元素

7.nodeType 节点类型 9代表Document节点 1代表Element节点 3代表Text节点，8代表Comment节点，11代表DocumentFragment节点

8.nodeVlue Text节点或Comment节点的文本内容

9、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示

注意，以上6个方法连元素节点也算一个节点。

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        </style>

    </head>

    <body>

        <div id="node">

            <p id="pOne" class="classOne">我是第一个p</p>

            <p id="pTwo" class="classTwo">我是第二个p</p>

        </div>

        <script>

            var node1 = document.querySelector(".classTwo");

            alert(node1.parentNode.innerHTML); //输出  <p id="p1" class="class1">我是第一个P</p><p id="p2" class="class2">我是第二个P</p>

            var nodeList = document.getElementById("node");

            var arr = nodeList.childNodes;

            //解释一下为什么是 1 3  因为该方法连文本节点也会获取 所以一共有 0 空 1 我是第一个P 2 空 3 我是第二个P 4 空

            alert(arr[1].innerHTML + "  " + arr[3].innerHTML ); //输出 我是第一个P - 我是第二个P

        </script>

    </body>

</html>

第二个例子：

  <div id="div1">

            文本1

            <p id="p1" class="class1">

                我是第一个P</p>

            文本2

            <p id="p2" class="class2">

                我是第二个P</p>

            文本3

        </div>

    window.onload = function () {        //依次输出，文本1，我是第一个P，文本2，我是第二个P，文本3

            var node = document.getElementById("div1");

            for (var i = 0; i < node.childNodes.length; i++) {

                if (node.childNodes[i].nodeType == 1) {

                    alert(node.childNodes[i].innerHTML);

                }

                else if (node.childNodes[i].nodeType == 3) {

                    alert(node.childNodes[i].nodeValue);

                }

            }

        }

(2)作为元素树的文档
    1、firstElementChild        第一个子元素节点
    2、lastElementChild        最后一个子元素节点
    3、nextElementSibling        下一个兄弟元素节点
    4、previousElementSibling    前一个兄弟元素节点
    5、childElementCount        子元素节点个数量
    注意，此5个方法文本节点不算进去

        <div id="div1">

            <p id="p1" class="class1">

                我是第一个P</p>

            <p id="p2" class="class2">

                我是第二个P</p>

      </div>

        window.onload = function () {

            var node = document.getElementById("div1");

            var node1 = node.firstElementChild;

            var node2 = node.lastElementChild;

            alert(node.childElementCount);  //输出2，div1一共有两个非文档子元素节点

            alert(node1.innerHTML);         //输出 我是第一个P

            alert(node2.innerHTML);         //输出 我是第二个P

            alert(node2.previousElementSibling.innerHTML);  //输出 我是第一个P(第二个元素节点的上一个非文本元素节点是P1)

            alert(node1.nextElementSibling.innerHTML);      //输出 我是第二个P(第一个元素节点的下一个兄弟非文本节点是P2)

        }

通过JavaScript操作HTML 元素基本都是用以上的几个方法。欢迎大家继续补充。

秒客网

HTML 学习笔记 JavaScript (DOM)

相关文章