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

随机推荐

tomcat下运行多个项目
1. tomact下修改端口解决端口冲突 http://jingyan.baidu.com/article/9f63fb91d0f1b8c8400f0e1d.html 打开 servers下面的ser ...
subversion SVN
subversion(简称svn)是近年来崛起的版本管理软件系统,是cvs的接班人.目前,绝大多数开源软件都使用svn作为代码版本管理软件. Subversion是一个版本控制系统,相对于的RCS.C ...
【原】Github系列之一：一起做仿天气类应用中的实时模糊效果LiveBlur
从本文开始,我将专门开辟一个Github Code系列,开源自己写的一部分有意思而且实用的demo,共同学习.以前都发布在git OSChina上,后面有空会陆陆续续整理到Github上.OSChin ...
H5一二事
先回顾一下WEB技术的几个阶段 Web 1.0 内容为主,主要流行HTML和CSS Web 2.0 动态网页,流行AJAX/JavaScript/DOM H5 时代,WEB开发回归富客户端那么H5肯 ...
按要求编写Java应用程序：（1）编写西游记人物类（XiYouJiRenWu）其中属性有：身高（height），名字（name），武器（weapon）方法有：显示名字（printName)，显示武器（printWeapon) （2）在主类的main方法中创建二个对象：zhuBaJie，sunWuKong。并分别为他们的两个属性（name,weapon）赋值，最后分别调用printName,
package com.hanqi.test; public class xiyoujirenwu { private double height;// 身高 private String name; ...
0022 Java学习笔记-面向对象-继承、多态、组合
继承的特点单继承:每个子类最多只有一个直接父类,注意是直接父类,间接父类个数不限注意父类的概念:A-->B-->C-->D,在这里,ABC都是D的父类,C是D的直接父类,AB是D ...
jquery最常用的几个方法。
jquery使用手册:http://www.eduyo.com/doc/jquery/cheatsheet.html addClass 样式: <style> .textRed { col ...
Hadoop生态圈以及各组成部分的简介
1.Hadoop是什么? 适合大数据的分布式存储与计算平台 HDFS: Hadoop Distributed File System分布式文件系统 MapReduce:并行计算框架解决的问题: HD ...
c# ref 的作用
Usage of ref keyword in C# When we pass a value type variable as a parameter, then it passes its va ...
CSS实现自定义手型气泡提示
实现自定义的手型气泡提示 <html> <head> <meta charset="utf-8"> <title></titl ...

HTML 学习笔记 JavaScript (DOM)

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

随机推荐

热门专题