JavaScript要点(九)HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
A、通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
本例查找 id="intro" 元素:
var x=document.getElementById("intro");
如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。
如果未找到该元素,则 x 将包含 null。
B、通过标签名查找 HTML 元素
本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
C、通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:
var x=document.getElementsByClassName("intro");
JavaScript要点(九)HTML DOM的更多相关文章
- javascript 要点
javascript 要点 1 JavaScript:写入 HTML 输出 document.write("<h1>This is a heading</h1>&qu ...
- JavaScript之旅(DOM)
JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...
- JavaScript(第十八天)【DOM基础】
学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘 ...
- JavaScript大杂烩10 - 理解DOM
操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标. DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...
- 第一百四十一节,JavaScript,封装库--DOM加载
JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...
- JavaScript的BOM和DOM
JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...
- JavaScript之BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- 8.6 JavaScript之HTML的DOM(三)
8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档 是一个节点 ...
- [JavaScript之BOM与DOM]
[JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...
随机推荐
- Android 通过广播启动另一个应用的Activity
需求:现在有应用A和应用B,我需要在A应用中启动B应用中的某个Activity 实现:A应用中的Activity发送广播,关键代码如下: String broadcastIntent = " ...
- linux下关于程序性能和系统性能的工具、方法
观察性能/状态的方法:top free netstat /pro/目录下的信息 其中/pro/meminfo下的信息相当丰富 ------------------------------------- ...
- android系统平台显示驱动开发简要:Samsung LCD接口篇『三』
平台信息: 内核:linux3.4.39系统:android4.4 平台:S5P4418(cortex a9) 作者:瘋耔(欢迎转载,请注明作者) 欢迎指正错误,共同学习.共同进步!! 关注博主新浪博 ...
- Windows CE,你妈吗喊你在多核上玩玩
转自:http://hezongjian.com/blog/?p=9693 众所周知,CE的内核是完全重新写的,与9x根nt没有任何关系,这给CE带来了较好的实时性及灵活性.从诞生之日起,CE的内核改 ...
- MSSQL复制功能实现与Oracle数据库同步
1.分别建立链接对数据库进行操作,SQLServer可以用ADO.NET,操作Oracle可以用OLEDB或者用System.Data.OracleClient(需要添加引用才能用) 这种方案的优点就 ...
- UVa 442 (栈) Matrix Chain Multiplication
题意: 给出一个矩阵表达式,计算总的乘法次数. 分析: 基本的数学知识:一个m×n的矩阵A和n×s的矩阵B,计算AB的乘法次数为m×n×s.只有A的列数和B的行数相等时,两个矩阵才能进行乘法运算. 表 ...
- mysql中增加某一时间段内的时间数据(包含:时间、年、月、日、第几周、季度)
创建表dim_date: create table `dim_date` ( `year` int (20), `month` int (20), `day` int (20), `week` int ...
- OK335xS can't reset with reboot
/*********************************************************************** * OK335xS can't reset * 说明: ...
- Java [Leetcode 100]Same Tree
题目描述: Given two binary trees, write a function to check if they are equal or not. Two binary trees a ...
- OpenGL学习之路(五)
1 引子 不知不觉我们已经进入到读书笔记(五)了,我们先对前四次读书笔记做一个总结.前四次读书笔记主要是学习了如何使用OpenGL来绘制几何图形(包括二维几何体和三维几何体),并学习了平移.旋转.缩放 ...