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 元素 基本都是用以上的几个方法。欢迎大家继续补充。

时间: 2024-10-13 23:00:45

HTML 学习笔记 JavaScript (DOM)的相关文章

dojo 学习笔记之一 dom.byId dojo.byId registry.byId 的区别

在dojo中,除了沿用Dom结点, dojo 还自定义了一类结点用"dojoType" 进行标识. dojo 称这些结点为widget. 当检测到HTMl文档中某个标签定义了dojoType 属性之后,dojo会调用dojo包中相应的 js 及 css 文件对这个结点进行渲染. 从而这个结点元素就会相应地显示出具有dojo特色的样式及功能. 如此说来, dom.byId 跟 dojo.byId 获取到的就是普通的HTMl文档结构树中的某个结点元素,以下简称dom结点, 而 regist

学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e

HTML 学习笔记 JavaScript(面向对象)

现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让我们跟着大神的思路在捋一下.(在这里更欢迎大家阅读原博 )原博地址:http://www.cnblogs.com/dolphinX/p/4385862.html 理解对象 对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象! 对象是什么?什么觉面向对象的编程? 对象(object),台湾

javascript学习笔记:DOM节点概述

0x01: DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成.本文将主要说明DOM节点类型.HTML DOM 定义了访问和操作 HTML 文档

javascript学习笔记:DOM节点关系和操作

0x01:前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不同的信息及标记.每个节点都拥有各自的特点.数据和方法,也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.本文将详细描述DOM间的节点关系和基础的DOM操作.节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱.接下来,将把DOM节点关系分为属性和方法两部分进行详细说明. 0x02:属性 父级属性par

javascript学习笔记之DOM

DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节点类型,利用12个数值来表示.1代表Element,2代表attribute,3代表Text... 2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型 2.节点关系相关属性 I.childNodes属性,返回一个NodeList对象,这是一个有生命,会呼吸的对象,能够

JavaScript学习笔记——5.DOM(文档对象模型)

1.获得对象方式 方法一 document.getElementsByTagName("div"); document.getElementById("head"); document.getElementsByName("username"); 方法二 //通过数组 document.all //存在为IE,不存在为FF document.body document.forms document.images document.links 2.

【JS学习笔记】DOM操作应用-创建、插入和删除元素;文档碎片

一.创建.插入和删除元素 (1)创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子:为ul插入li <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

【JS学习笔记】DOM基础-字节点,父节点

一.DOM基础 (1)什么是DOM?DOM,即document,是用来操作页面上的元素,比如操作div获取,修改样式等.是JS的组成部分,还是一套规范. (2)浏览器的支持情况 现在主流的浏览器有3种,分别是IE,Chrome,Firefox. IE:在IE6-8版本中,对DOM的支持差不多是百分之十几差不多了,但是到了IE9就有了质的飞跃. Chrome:介于两者之间,在60%左右,对DOM支持的不是那么的好也不是那么的差. Firefox:对于DOM的支持几乎可以用99%来形容. 二.DOM