认识DOM(文档对象模型)

DOM(Document Object Model):定义访问和处理HTML文档的标准方法。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM简介</title>
</head>
<body>
<h2>
<a href="http://www.baidu.com">JavaScript DOM</a>
</h2>
<p>哒哒哒</p>
<ul>
<li>JavaScript</li>
<li>DOM简介</li>
</ul>
</body>
</html>

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.baidu.com"。

一、通过ID获取元素

语法:

document.getElementById("idName");

结果:null或[object HTMLParagraphElement]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM简介</title>
</head>
<body>
<h2>
<a href="http://www.baidu.com">JavaScript DOM</a>
</h2>
<!--设置P标签的id-->
<p id="con">哒哒哒</p>
<script type="text/javascript">
//通过ID获取元素
var mychar=document.getElementById("con")
document.write("输出:"+mychar)
</script> </body>
</html>

运行结果:

JavaScript DOM

哒哒哒

输出:[object HTMLParagraphElement]

二、通过innerHTML属性修改文本节点

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML="newtext"

其中Object为获取的元素对象,如通过document.getElementById获取的元素。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM简介</title>
</head>
<body>
<h2>
<a href="http://www.baidu.com">JavaScript DOM</a>
</h2>
<!--设置P标签的id-->
<p id="con">哒哒哒哒哒哒</p>
<script type="text/javascript">
//通过ID获取元素
var mychar=document.getElementById("con")
document.write("修改前:"+mychar.innerHTML+"<br>") //利用<br>实现换行
mychar.innerHTML="尽管科琳双胞胎作为班长" //通过innerHTML属性来修改元素内容
document.write("修改后:"+mychar.innerHTML)
</script> </body>
</html>

运行效果:

JavaScript DOM

尽管科琳双胞胎作为班长

修改前:哒哒哒哒哒哒
修改后:尽管科琳双胞胎作为班长

三、控制类名(className属性)

className 属性设置或返回元素的class 属性。

语法:

object.className = classname
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM简介</title>
<style type="text/css">
.one{
font-size: 20px;
color: red;
}
.two{
font-size: 30px;
color: blue;
}
.three{
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<h2>
<a href="http://www.baidu.com">JavaScript DOM</a>
</h2>
<!--设置P标签的id-->
<p id="con1" class="one">哒哒哒哒哒</p>
<p id="con2" class="two">哈哈哈哈哈</p>
<p id="con3" class="three">嘎嘎嘎嘎嘎</p>
<input type="button" value="点击我,修改样式" onclick="modify()">
<script type="text/javascript">
var mychar=document.getElementById("con1")
function modify(){
//通过.className属性,修改样式
mychar.className="three"
}
</script> </body>
</html>

运行效果:

四、通过Object.style.property修改元素的样式

(1)文本属性

语法:

Object.style.property="new style"

常见样本属性表:



(2)显示或隐藏 
语法:

Object.style.display=value

value取值:

描述
none 此元素将被隐藏
block 此元素将被显示
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM简介</title>
</head>
<body>
<h2>
<a href="http://www.baidu.com">JavaScript DOM</a>
</h2>
<!--设置P标签的id-->
<p id="con1">哒哒哒哒哒</p>
<p id="con2">哈哈哈哈哈</p>
<p id="con3">嘎嘎嘎嘎嘎</p>
<script type="text/javascript">
//通过ID获取元素
var mychar1=document.getElementById("con1");
//通过Object.style.property修改元素的样式
mychar1.style.color="red";
mychar1.style.fontSize="20px";
//mychar1.style.background="blue";
//mychar1.style.width="300px"; //此处的width为背景的宽度 //隐藏ID为con2的元素
document.getElementById("con2").style.display="none"
//显示ID为con3的元素
document.getElementById("con3").style.display="block" </script> </body>
</html>

运行效果:

JavaScript DOM

哒哒哒哒哒

嘎嘎嘎嘎嘎

五、getElementsByName()方法

语法:

document.getElementsByName(name)

注意:

1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
//通过document.getElementsByName()查找相同Name的标签
var mynode= document.getElementsByName("myt"); ;
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6"> <br />
<input type="button" onclick="getnum()" value="看看有几项?" />
</body>
</html>

运行效果:

区别getElementByID,getElementsByName,getElementsByTagName

<input type="checkbox" name="hobby" id="hobby1">  音乐

其中:ID为“hobby1”,name为“hobby”,tagname为“input”。

参考:https://www.imooc.com

JS -- DOM(文档对象模型)的更多相关文章

  1. javascript之DOM文档对象模型编程的引入

    /* DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的 对象进行描述,我们在浏览器上看 ...

  2. JavaScript(三、DOM文档对象模型)

    一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: &q ...

  3. html--JavaScript之DOM (文档对象模型)

    一.简介 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标 ...

  4. DOM文档对象模型简介

    DOM简介     DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...

  5. dom文档对象模型图

  6. 文档对象模型 DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...

  7. js DOM Node类型

    DOM(文档对象模型)是针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的.以特定节点为根节点的树形结构.节点分为12种不同的类型,每种类型分别表示 ...

  8. JS DOM操作(一) 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  9. js DOM之基础详解

    DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.删除和修改页面的某一部分. HTML DOM 树形结构如下: 1.Node方面 1.1 节点类 ...

  10. JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】

    全部章节   >>>> 本章目录 4.1 文档对象模型简介及属性 4.1.1 文档对象模型概述 4.1.3 实践练习 4.2 document 对象查找 HTML 元素 4.2 ...

随机推荐

  1. C#算法设计查找篇之03-插值查找

    插值查找(Interpolation Search) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/701 访问. 插值 ...

  2. C#LeetCode刷题之#53-最大子序和(Maximum Subarray)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4012 访问. 给定一个整数数组 nums ,找到一个具有最大和的 ...

  3. 洛谷P1308.统计单词数(字符串匹配)

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...

  4. 只要动手就能学到东西4 JSON.stringify

    今天在调试javascript时,需要将不可显示字符如\r\n在console显示出来,查了下,原来可以用JSON.stringify().这个方法以前也用过,但都是将javascript对象变成js ...

  5. Android Studio上传项目到GitHub出错

    上传代码到Github出错: 一.github push文件过大(超过50M会有警告,超出100M就会被限制) error: GH001: Large files detected. this exc ...

  6. PAT 2-13. 两个有序序列的中位数(25)

    题目链接:http://www.patest.cn/contests/ds/2-13 解题思路及代码如下: /* 解题思路: 分别求出序列A 和B 的中位数,设为a 和b,求序列A 和B 的中位数过程 ...

  7. PAT 2-05. 求集合数据的均方差(15)

    题目意思:求N个给定整数的均方差. 求平均值需要先转化为double类型,如果没转化会损失精度,造成错误. 代码如下: #include<iostream> #include<cma ...

  8. Java泛型详解,通俗易懂只需5分钟

    转载出处:http://www.weixueyuan.net/view/6321.html 我们知道,使用变量之前要定义,定义一个变量时必须要指明它的数据类型,什么样的数据类型赋给什么样的值. 假如我 ...

  9. 5 个 Git 工作流,改善你的开发流程

    原文地址:5 Git workflows you can use to deliver better code and improve your development process 原文作者:Vi ...

  10. 易盛信息9.0外盘期货行情数据API接口公共授权开发包例子代码

    易盛信息9.0外盘期货行情数据API接口公共授权开发包例子代码        怎么才能获取到外盘期货行情数据API接口呢?不少朋友就会考虑到易盛9.0行情API接口,本身易盛就是一个软件提供商,提供行 ...