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

随机推荐

Android 调用已安装市场，进行软件评分的功能实现
Uri uri = Uri.parse("market://details?id="+getPackageName()); Intent intent = new Intent(I ...
通过JavaScript原型链理解基于原型的编程
零.此文动机用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...
iOS字体换算 PS的字体大小 <=>iOS上字体大小
CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要同时保持画面流畅.“Spri ...
IO流04--毕向东JAVA基础教程视频学习笔记
Day20 01 File概述02 File对象功能-创建和删除03 File对象功能-判断04 File对象功能-获取05 File对象功能-文件列表106 File对象功能-文件列表207 列出目 ...
Harrypotter
#include<iostream> using namespace std; int main() { ]={}; int a,b,c,d; cout<<"请输入总 ...
Oracle BIEE 环境迁移所导致的账号登陆问题的解决
系统版本系统版本:11G(11.1.1.9) 问题描述将系统数据(RPD.catalog等数据)迁移到另一环境(版本同样为11G)后,老系统weblogic控制台中添加的账户在新系统(仪表盘)中无 ...
CSS之旅——第二站如何更深入的理解各种选择器
上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成了xml格式,否则的话就是一堆“杂乱无章”的string ...
【shell--批量远程MySQL，执行命令】-【工作总结】
昨天下班前,老板给了一批LOG数据库IP地址,需要统计LOG表里Message字段top 10的结果,并输出到一个excel文件里.抽查看了下,有两种格式的以当天日期结尾的表名.由于数量太多,时间紧迫 ...
Access restriction: The type 'RSACipher' is not API
解决方法: http://stackoverflow.com/questions/860187/access-restriction-on-class-due-to-restriction-on-re ...

HTML 学习笔记 JavaScript (DOM)

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

随机推荐

热门专题