访问 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. Table的分割线偏移量设置 及其 UIEdgeInset详解

    -(void)viewDidLayoutSubviews { if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)] ...

  2. Android updater-scripts(Edify Script)各函数详细说明(转)

    这是Android系统来运行updater-scripts的Edify语言的基本介绍. 大部分的Edify命名都是函数,当调用这些函数结束的时候,会返回数据给脚本.当然,你也可以使用这些函数的返回值来 ...

  3. Mongodb 安装迁移

    <pre name="code" class="python">1.下载MongoDB(64位) http://fastdl.mongodb.org ...

  4. 《windows程序设计》学习_4.1：计时器（可用于扫雷）

    为了做一个逼真的扫雷,我的扫雷程序的位图都是从windowsXP下面的扫雷里来的.具体是怎么获取位图的呢?win8.1不给力,习惯了vc++6.0,所以虚拟机里装上了xp,用vc++6.0加载扫雷程序 ...

  5. CentOS 删除自带的OpenJDK 和 安装SunJDK

    [root@WX32 local]# java -version java version "1.6.0" OpenJDK Runtime Environment (build - ...

  6. [Leetcode][Python][DP]Regular Expression Matching

    # -*- coding: utf8 -*-'''https://oj.leetcode.com/problems/regular-expression-matching/ Implement reg ...

  7. MongoDB Error

    ①,org.springframework.core.convert.ConverterNotFoundException: No converter found capable of     con ...

  8. img 中的src的应用

    在页面载入的时候,img标签的src 会跟填写的内容去载入,servlet 或者controller 或者你自己觉得希望载入的java代码. 我们这边举一个载入servlet的样例. <img ...

  9. 脚本化css

    html文档的视觉显示包含很多变量:字体.颜色.间距等.css标准列举了这些变量.我们称之为样式属性.css定义了这些属性以指定字体.颜色.外边距.边框.背景.图片.文本对齐方式.元素尺寸和元素位置. ...

  10. 读数据库所有表和表结构的sql语句

    SQL获取所有数据库名.表名.储存过程以及参数列表 1.获取所有用户名:SELECT name FROM Sysusers where status='2' and islogin='1'islogi ...