访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

 <body>

  <p id = "intro">Hello World!</p>

  <p>本例演示<b>getElementById("intro");</b></p>

  <script type="text/javascript">

 x  = document.getElementById("intro");

 document.write("<p>来自intro段落的文本："+x.innerHTML);

  </script>

 </body>

</html>

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<p>DOM 很有用！</p>

<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<script>

x=document.getElementsByTagName("p");

document.write("第一段的文本: " + x[0].innerHTML+"<br>");

document.write("第二段的文本: " + x[1].innerHTML+"<br>");

document.write("第三段的文本: " + x[2].innerHTML);

</script>

</body>

</html>

HTML DOM访问的更多相关文章

  1. DOM学习总结（三）DOM访问/操作

    DOM访问理解:找到这个标签元素,然后才能对它进行操作 1.getElementById() 方法document.getElementById(""); //通过id名字来找到 ...

  2. Javascript高性能编程-提高Dom访问速度

    在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度.下面是对如何优化的一些总结: 将需要多次操作的节点存储在一个 ...

  3. 提高Dom 访问效率

    在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度. JS访问DOM是很慢的,尽量不要用JS来设置页面 布局 有 ...

  4. DOM访问元素样式和操作元素样式

    在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...

  5. -_-#【减少 DOM 访问】缓存已经访问过的元素

    Minimize DOM Access Cache references to accessed elements 选择器查询是开销很大的方法.所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的 ...

  6. -_-#【减少 DOM 访问】“离线”更新节点，再将它们添加到树中

    Minimize DOM Access javascript 之 DOM 优化 <!DOCTYPE html> <html> <head> <meta cha ...

  7. HTML DOM 访问2

    getElementsByTagName() 方法 getElementsByTagName() 返回带有指定标签名的所有元素. x=document.getElementById("mai ...

  8. DOM访问关系（父节点 子节点）

    把下面的知识点掌握了,可以做一下下面的案例,都是工作中常用的,很有用 知识点   1.带Eleent和不带区别     a)带Element的获取的是元素节点     b)不带Element的获取文本 ...

  9. DOM访问和处理HTML文档的标准方法

    innerHTML获取或替换HTML元素的内容 <p id="d">对于错我无法来判断 </p><script type="text/jav ...

随机推荐

  1. php中如何输出当前服务器的（中国）当前时间

    date_default_timezone_set('PRC');//PRC是什么?PRC是中华人民共和国啊-_- echo "今天是".date("Y年m月d日&quo ...

  2. struts2笔记04-XxxAware接口

    1.XxxAware接口 ApplicationAware, RequestAware,SessionAware, ParameterAware.      struts2提供了这四个Aware接口用 ...

  3. UltraISO制作U盘系统安装盘（图文教程）

    虽然现在的系统盘做的越来越傻瓜化,安装方法也非常多,但是仍然时常有朋友询问怎么安装系统,特别是没有刻录机或不想刻盘,又不懂硬盘安装的朋友,这里特别介绍一种用U盘来安装系统的方法,非量产,量产因U盘芯片 ...

  4. 转：CSS布局奇淫技巧之-宽度自适应

    css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...

  5. Hdu Binary Tree Traversals

    Problem Description         A binary tree is a finite set of vertices that is either empty or consis ...

  6. asp.net软件测试学习

    ormaping类是,将数据操作封装起来的一种数据操作方法,在测试的时候,如果说,insert之后对obj对象赋值赋值,每个属性应该对应自己的objDataRow["REGISTERID&q ...

  7. HTML5的绘图的支持

    一.简单介绍canvas元素 <canvas.../>是HTML5新增的一个元素,该元素用于绘制图形.实际上<canvas../>只是相当于一张画布. 它除了可以指定通用属性外 ...

  8. framework层和native层实现联网控制（iptable方式）

    最近工作中,需要开发一个功能----联网控制,这个功能其实用过root的安卓机应该都知道,禁止某个应用连接移动网络或者wifi. root后,通过su去执行iptable的命令就可以根据uid去控制应 ...

  9. SQL Server中 sysobjects、syscolumns、systypes

    1.sysobjects    系统对象表. 保存当前数据库的对象,如约束.默认值.日志.规则.存储过程等 在大多数情况下,对你最有用的两个列是Sysobjects.name和Sysobjects.x ...

  10. Unity StrangeIoc框架 (三）signal信号方式

    先创建TestRoot using UnityEngine; using System.Collections; using strange.extensions.context.impl; publ ...