文档章节

JavaScript要点(九)HTML DOM

MR_BT
 MR_BT
发布于 2017/01/21 01:05
字数 381
阅读 3
收藏 0

通过 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");

 

本文转载自:http://www.cnblogs.com/tig666666/p/5955465.html

上一篇: "file:///" file 协议
下一篇: inferred 和 freefrom
MR_BT
粉丝 0
博文 49
码字总数 13680
作品 0
深圳
高级程序员
私信 提问
掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2018/06/26
0
0
掌握11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2014/05/14
3.1K
25
Web Components 全揽

Web Components技术可以把一组相关的HTML、JS代码和CSS风格打包成为一个自包含的组件,只要使用大家熟悉的标签即可引入此组件。Web Components技术包括: Custom Element Shadow DOM Templa...

RecoReco
2018/12/02
0
0
如何学习Javascript?你是入门,还是精通?

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门。   谈不上经验,都是一些教训。   这个时候有人要说,“靠,你丫半桶水,凭啥教我们”。您先别急着骂,先听我说。...

coffeescript
2014/07/23
536
0
再谈 load 与 DOMContentLoaded

本文首发在github,感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了,相信大家在刚入门时,见的最多的可能就是 load 事件了。load 事件接触多了,大家就会接触...

lucefer
2018/06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

zk中ToBeAppliedRequestProcessor解析

ToBeAppliedRequestProcessor在Leader中 在已处理事务和最后处理事务处理器之间,处理器链上下一个是FinalRequestProcessor public void processRequest(Request request) throws RequestPro...

writeademo
24分钟前
2
0
Allegro快捷键设置-PCB环境

立题简介: 内容:简单介绍Allegro绘制的PCB环境下的快捷键; 来源:实际使用得出; 作用:对Allegro绘制PCB快捷键进行介绍; PCB环境:Cadence 16.6; 立题详解: 对“allegro”板而言,其在...

demyar
26分钟前
2
0
idea maven web项目启动build时报错java.lang.NullPointerException

之前还好好的,重启一下idea就报这个错了,大概率是tomcat没杀掉端口被占用了,在tomcat配置中更换一下sever端口就好了

宇辰OSC
29分钟前
3
0
weed3-2.3.1.查询之输出

Weed3 一个超轻量级ORM框架(只有0.1Mb哦) 源码:https://github.com/noear/weed3 源码:https://gitee.com/noear/weed3 查询可是个复杂的话题了,可能我们80%的数据库处理都在查询。 今天先...

刘之西东
29分钟前
3
0
【Android JetPack系列】数据绑定:DataBinding

参考MVVM

Agnes2017
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部