首页 > 代码库 > HTML 学习笔记 JavaScript (DOM)

HTML 学习笔记 JavaScript (DOM)

2024-08-29 02:33:56   219人阅读

一 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)


联系
我们