`
uoke
  • 浏览: 14952 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

HTML DOM getElementById() 方法

阅读更多
定义和用法
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

语法
document.getElementById(id)说明
HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
实例
例子 1
<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>例子 2
getElementById() 是一个重要的方法,在 DOM 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了:

function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }
上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。


注:innerHTML属性指的是标签之间的内容。

是开始标签和结束标签之间的字符,不包括标签本身
比如

<p id="pp">aaaaaaaaaa<span id="ss">bbbbbbbb</span> </p>

这里的p标签和span标签嵌套在一起
那么pp.innerHTML的内容就是
aaaaaaaaaa<span id="ss">bbbbbbbb</span>

ss.innerHTML的内容就是

bbbbbbbb

=========================
类似的一个属性是outerHTML
分享到:
评论

相关推荐

    HTML DOM 常用的属性和方法

    HTML DOM(文档对象模型)是Web开发中用于...这些属性和方法构成了DOM的核心,让开发者能够高效地查找、修改和操作HTML页面中的元素和内容,实现动态效果和交互。了解并熟练掌握这些知识点对于进行前端开发至关重要。

    HtmlDom.rar_HTML dom_PHP HTMLdom

    例如,我们可以使用`getElementsByTagName()`、`getElementById()`或`querySelectorAll()`等方法来选取文档中的特定元素。选取元素后,可以使用`nodeValue`属性改变文本内容,`setAttribute()`方法修改属性值,甚至...

    前端开源库-htmldom

    例如,我们可以使用`getElementById`、`getElementsByClassName`或`getElementsByTagName`等方法来查找特定的元素,使用`appendChild`、`insertBefore`等方法进行节点插入,以及`innerHTML`属性进行内容替换等。...

    HTML DOM 参考手册 电子书

    2. **选择元素**:书中会讲解如何使用`getElementById`、`getElementsByTagName`、`getElementsByClassName`等方法来定位文档中的特定元素。此外,还会涉及CSS选择器的使用,如类选择器、ID选择器等。 3. **属性...

    HTML DOM 参考手册

    比如,`getElementById`方法用于根据ID获取元素,`appendChild`方法用于向元素添加新的子节点,`addEventListener`方法用于添加事件监听器。这些方法使得动态改变页面内容和行为成为可能。 5. **事件**:事件是用户...

    XMLDOM对象方法手册

    这篇“XMLDOM对象方法手册”提供了关于如何利用XMLDOM对象进行XML操作的详细指南。 1. **XMLDOM对象的创建** 在JavaScript中,可以使用`ActiveXObject`来创建XMLDOM对象,例如: ```javascript var xmlDoc = new...

    htmlDOM.rar_DOM_HTML DOM_HTML dom_HTMLD_w3c htmld

    在这个“htmlDOM.rar”压缩包中,我们找到了一个名为“htmlDOM方法手册.chm”的文件,这很可能是关于HTML DOM的详细参考指南,特别适合初学者学习。 DOM将HTML或XML文档解析为一棵由节点构成的树形结构,每个节点...

    JavaScript获取HTML DOM节点元素的方法的总结

    以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...

    htmlDOM方法手册.rar

    本手册详细介绍了HTML DOM的各种方法,帮助开发者更好地理解和使用这些方法。 在HTML DOM中,每个HTML元素都是一个对象,而DOM方法则提供了对这些对象进行操作的功能。以下是一些核心的DOM方法: 1. `...

    DOM基础及DOM操作HTML

    王兴魁老师在“AJAX视频(Netbeans)DOM基础及DOM操作HTML”课程中,可能会深入讲解如何在实际开发中利用DOM进行AJAX(异步JavaScript和XML)通信。AJAX允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分...

    html dom 底层 javascript

    1. **选择元素**:使用`getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`等方法获取页面中的元素。 2. **修改元素**:一旦获取到元素,可以通过更改其属性(如`innerHTML`、`textContent`...

    手工HTML代码转换为DOM代码

    然后,我们可以通过`getElementById`等方法从`Document`中选取特定的DOM元素。最后,我们可以将这些元素添加到现有的DOM树中。 需要注意的是,这种方法适用于较小的HTML片段。如果HTML代码非常复杂,或者包含大量的...

    html dom 手册

    可以通过`getElementById`、`getElementsByTagName`、`getElementsByClassName`等方法访问它们。 3. **属性节点**:元素可以有属性,如`id`、`class`、`href`等。可以通过`getAttribute`和`setAttribute`方法来读取...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    在这个部分,我们将学习更多关于DOM元素操作的方法和技巧。 首先,`getElementById()`是获取特定ID元素的常用方法。通过这个方法,我们可以直接根据元素的ID找到它,并对其进行操作,例如改变其内容、样式或属性。...

    浅析php插件 Simple HTML DOM 用DOM方式处理HTML

    除了`find()`方法,Simple HTML DOM还提供了其他一些有用的方法,如`getElementById()`, `getElementByTagname()`, `removeChild()`, `insertBefore()`等,这些方法都让处理HTML文档变得更加便捷。 在实际应用中,...

    DOM.rar_DOM_HTML dom_dom树解析

    例如,可以通过`getElementById`方法获取特定ID的元素,或者通过`getElementsByTagName`找到所有特定类型的元素。此外,`appendChild`可以向元素添加新的子节点,`innerHTML`属性可以用来设置或获取元素内部的HTML...

    js_HTML_Dom操作练习

    1. **获取元素**:在DOM中,`document.getElementById()`是最常用的获取元素的方法,通过元素的ID属性来定位。除此之外,还有`document.querySelector()`和`document.querySelectorAll()`,它们分别返回匹配CSS选择...

    DOM常用属性和方法

    ### DOM常用属性和方法 #### 一、DOM与HTML文档结构理解 在DOM(Document Object Model,文档对象模型)的世界里,HTML文档被视作一种树状结构,其中`&lt;html&gt;`作为根节点,而其他诸如`&lt;head&gt;`、`&lt;title&gt;`、`&lt;body&gt;`...

Global site tag (gtag.js) - Google Analytics