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)的更多相关文章

jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
HTML 学习笔记 JavaScript（面向对象）
现在让我们继续跟着大神的脚步前进学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋一脸萌比啊.还好有大神.让 ...
[JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
BOM、DOM学习笔记——JavaScript
1.BOM的概述 browser object modal :浏览器对象模型. 浏览器对象:window对象. Window 对象会在 <body> 或 <fram ...
js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
JavaScript 学习笔记-HTML&&DOM
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...
JavaScript学习笔记之DOM介绍
目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介文档对象模型(Document Object Model,DOM) ...

随机推荐

CoreDataStack
Eclipse的自动排版设置（format）
Java排版: 主要是在文件保存时自动触发排版等规则,省掉反复操作快捷键 Ctrl+Shift+F 的步骤.在 eclipse 中选择 Window-> Preferences- ...
JNI输出log信息
1.修改Android.mk 如生成的库文件是“.so文件”,则在Android.mk中添加如下内容: LOCAL_LDLIBS:=-L$(SYSROOT)/usr/lib -llog 如生成的库文件 ...
禁止uiscrollview垂直方向滚动，只允许水平方向滚动；或只允许垂直方向滚动
禁止UIScrollView垂直方向滚动,只允许水平方向滚动 scrollview.contentSize = CGSizeMake(你要的长度, 0); 禁止UIScrollView水平方向滚动, ...
记一次eclipse无法启动的排查过程
起因是本地为开发工程打包,总是提示 source 1.3 不支持注释.enum等等,但询问开发开发表示自己本地打包正常. 于是排查版本问题.开发的jdk是1.6版本,自己的是1.7,于是想要不降级吧, ...
SSH 框架
SSH是 struts+spring+hibernate的一个集成框架,是目前较流行的一种web应用程序开源框架.是把多个框架(Struts.Spring以及Hibernate)紧密的结合在一起,用于 ...
css字体家族
名词解释: 衬线指的是字体起始末端的细节装饰.
荷兰国旗 Flag of the Kingdom of the Netherlands
问题描述:现有n个红白蓝三种不同颜色的小球,乱序排列在一起,请通过两两交换任意两个球,使得从左至右的球依次为红球.白球.蓝球.这个问题之所以叫做荷兰国旗,是因为将红白蓝三色的小球弄成条状物,并有序排列 ...
谈谈yii2-gii如何自定义模板
作者:白狼出处:http://www.manks.top/article/yii2_gii_custom_template本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
利用webview实现在andorid中嵌入swf
项目背景是这样的,一套系统有三个客户端分别是网页,flex和android,现在已经在flex上面做好了一个在线客户视频聊天系统,然后在这个基础上修改打包成了SWF,放在网页上面使用效果不错,但是利用 ...

HTML 学习笔记 JavaScript (DOM)

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

随机推荐

热门专题