访问 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. JS倒计时器一只，顺便复习javascript时间相关函数

    window.onload = function(){ var uS = 604800; //后台提供 : 秒 var day=hour=minute=second=0, timer; var dem ...

  2. 如何将js与HTML完全脱离

    先举出一个例子: var sound='Roar!'; function myOrneryBeast(){ alert(this); this.style.color='green';//this指代 ...

  3. win8VPN

    上一章已经讲过Windows2008RT搭建VPN服务器搭建过程,接下来说一下win8的VPN登录 这里是win2008的VPN连接过程 先说win8的VPN登录过程.同样也很简单步骤和2008的差不 ...

  4. 程序员眼里IE浏览器是什么样的

    主流浏览器之争从上个世纪开就开始,已经持续了很长的时间.就在几年前,IE还是最主流的web浏览器.但现在形势完全不同了,人们都在笑话IE,纷纷转向其它浏览器.今天,我向大家分享一下针对IE的搞笑图片, ...

  5. Oracle EBS-SQL (SYS-10):锁定表查询.sql

    /*死锁查询-1*/ SELECT o.object_name, l.session_id,l.process, l.locked_mode FROM v$locked_object l , dba_ ...

  6. firemonkey打开子窗体

    procedure TForm1.Button1Click(Sender: TObject);varChildForm: TForm2;beginChildForm := TForm2.Create( ...

  7. 精简JRE的思路初探

    引言: JRE是Java程序赖以执行的基础环境,眼下JRE已经很的庞大;即使为了执行一个简单的Hello World的程序.可能依旧须要依赖整个JRE,将近百兆大小的依赖性. 能否够对特定Java程序 ...

  8. SQL语句一些特殊的用法

    SQL语句一些特殊的用法 一.基础 1.说明:创建数据库 CREATE DATABASE database-name  2.说明:删除数据库 drop database dbname 3.说明:备份s ...

  9. SQL练习之不破坏应用程序现有查询的修改模式

    当我还是一个菜鸟的时候,当然现在也是,当我的软件需求发生变化时,并且数据库设计同样要求发生变化,我通常会放弃原有的代码(或者对原有的代码进行大改),先在我知道了两个不破坏应用程序现有查询的修改模式,下 ...

  10. android上传位置信息导致的流量大爆炸问题调查

    原由:项目中有人写了个位置上传的服务,其实一直没问题,后来不知道什么时候出现了很多抱怨,是开着app流量一下子跑掉了几个G,差点就要卖房子还移动话费了,很多同事哭笑不得的找上门来,后来PM解决了,我一 ...