您的位置：首页 > Web前端 > HTML

Html之getElementById()方法&getElementsByTagName()方法示例

2016-11-20 22:21 344 查看


HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

代码示例：

<!DOCTYPE html>
<html>
<body>

<p id="Example">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("Example");
document.write("<p>Example段落的文本：" + x.innerHTML + "</p>");
</script>

</body>
</html>

运行结果：

Hello World!

本例演示 getElementById 方法！

Example段落的文本：Hello World!

============================================================================================================


nodeName 属性

nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。


nodeValue 属性

nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeName&nodeValue的使用方法：

<!DOCTYPE html>
<html>
<body>

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

<script>
x=document.getElementById("Example");
txt=document.getElementById("Example").innerHTML;
document.write("<p>"+"The text is:"+txt+"</p>");

document.write("</br>");
document.write("<p>示例节点的nodeValue:"+x.nodeValue +"</p>");
document.write("<p>示例节点的子节点的nodeValue:"+x.firstChild.nodeValue +"</p>");

document.write("</br>");
document.write("<p>示例节点的nodeName:"+x.nodeName+ "</p>");
document.write("<p>示例节点的子节点的nodeName:"+x.firstChild.nodeName+ "</p>");

document.write("</br>");
document.write("<p>示例节点的类型:"+x.nodeType+"</p>");
document.write("<p>示例节点的第一个子节点的类型:"+x.firstChild.nodeType+"</p>");
</script>

</body>
</html>


示例运行结果：

Hello World!
The text is:Hello World!

示例节点的nodeValue:null
示例节点的子节点的nodeValue:Hello World!

示例节点的nodeName:P
示例节点的子节点的nodeName:#text

示例节点的类型:1
示例节点的第一个子节点的类型:3

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法的使用方法：</p>
<p>DOM 很有用！</p>
<p>我在学习，我相信我能学好！</p>

<script>

document.write("</br>");
x=document.getElementById("intro");
document.write("<p>getElementById Return Value is：" + x + "</p>");
document.write("<p>getElementById Return Value's NodeName’：" + x.nodeName + "</p>");
document.write("<p>getElementById Return Value's NodeValue’：" + x.nodeValue + "</p>");

document.write("</br>");
document.write("<p>getElementById Return Value's childNode's NodeValue is：" + x.firstChild.nodeValue + "</p>");
document.write("<p>Id为intro段落的文本值为：" + x.innerHTML + "</p>");

document.write("</br>");
<!--这里的TagName就是标签名称，html的标签 -->
tagNameList=document.getElementsByTagName("p");
document.write("<p>第一段的文本: " + tagNameList[0].innerHTML +"</p>");
document.write("<p>第二段的文本: " + tagNameList[1].innerHTML +"</p>");
document.write("<p>第三段的文本: " + tagNameList[2].innerHTML +"</p>");
document.write("<p>第三段的文本: " + tagNameList[3].innerHTML +"</p>");

document.write("</br>");
<!--这里的TagName就是标签名称，html的标签 -->

</script>

</body>
</html>


运行结果：

Hello World!
本例演示 getElementById 方法的使用方法：
DOM 很有用！
我在学习，我相信我能学好！

getElementById Return Value is：[object HTMLParagraphElement]
getElementById Return Value's NodeName’：P
getElementById Return Value's NodeValue’：null

getElementById Return Value's childNode's NodeValue is：Hello World!
Id为intro段落的文本值为：Hello World!

第一段的文本: Hello World!
第二段的文本: 本例演示 getElementById 方法的使用方法：
第三段的文本: DOM 很有用！
第三段的文本: 我在学习，我相信我能学好！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Dom html
相关文章推荐
新的分享
章节导航