JS中getElementById()、getElementsByName()、getElementsByTagName() 的区别和应用

最新推荐文章于 2021-06-04 19:49:47 发布

平凡的Mac

最新推荐文章于 2021-06-04 19:49:47 发布

阅读量1.1k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用

语法：document.getElementByIdx_x_x(id)

getElementsByName() 方法可返回带有指定名称的对象的集合

语法：document.getElementsByName(name)

两者的不同点：

（1）该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

（2）因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

getElementsByTagName_r() 方法可返回带有指定标签名的对象的集合，返回元素的顺序是它们在文档中的顺序。

语法：document.getElementsByTagName_r(tagname)

提示：

(1)如果把特殊字符串 "*" 传递给 getElementsByTagName_r() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

(2)传递给 getElementsByTagName_r() 方法的字符串可以不区分大小写。

例子1：

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementByIdx_x_x("myHeader");
alert(x.innerText);
//alert(x.innerHTML);
}

function getValue2(){
//var n=document.getElementByIdx_x_x("name1");
var n=document.getElementByIdx_x_x("name2");
alert(n.value);
}

function id(x) {
if (typeof x == "string")

return document.getElementByIdx_x_x(x);

return x;
}

</script>
</head>
<body>

<h1 id="myHeader" οnclick="getValue();">这是标题1</h1>
<p>点击标题，会提示出标题1的值。</p>
<input type="text" name="name1" id="name2" value="表单中的值" οnclick="getValue2();"/>
<p>点击表单框，会提示出表单中的值。</p>

</body>
</html>

例子2：

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

</body>
</html>

例子3：

<html>
<head>
<script type="text/javascript">
function getElements()
  {
// var x=document.getElementsByTagName_r("input");
  var x=document.getElementByIdx_x_x("d").getElementsByTagName_r("input");
  alert(x.length);

  //getElementsByTagName_r() 方法获取文档中的一个特定的元素
  var myParagragh = document.getElementsByTagName_r("input")[3];
  alert(myParagragh.value)

}
</script>
</head>
<body>
<div id="d">
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" οnclick="getElements()"
value="How many input elements?" />

</body>
</html>

转自：http://apps.hi.baidu.com/share/detail/24429380

getElementById:
语法： document.getElementByIdx_x(id)
参数： id :必选项为字符串(String)
返回值：对象; 返回相同id对象中的第一个,如果无符合条件的对象，则返回 null
example：document.getElementByIdx_x("id1").value;
getElementsByName:
语法： document.getElementsByName(name)
参数： name :必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：document.getElementsByName("name1")[0].value;
document.getElementsByName("name1")[1].value;

getElementsByTagName:
语法： object.getElementsByTagName_r(tagname) object可以是document或event.srcElement.parentElement等
参数： tagname:必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：document.getElementsByTagName_r("p")[0].childNodes[0].nodeValue;
document.getElementsByTagName_r("p")[1].childNodes[0].nodeValue;
--------------------------------------------------------------------------------
getElementsByTagName_r() 不只是用在全局，更多的用法是：
obj.getElementsByTagName_r();
obj可以是任何对象。
--------------------------------------------------------------------------------
var all = document.getElementsByTagName_r('div')[0].getElementsByTagName_r('*');
就是取document.getElementsByTagName_r('div')[0]这个节点下边的所有。
准确的说应该是所有Element类型的节点，不包括TextNode类型的节点。
getElementsByTagName_r('*') *就像通配符一样，表示所有的TagName。
--------------------------------------------------------------------------------
document.getElementsByTagName_r('ul')[0].childNodes就是li的数组
它的长度就是li的个数

平凡的Mac

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中getElementById()、getElementsByName()、getElementsByTagName() 的区别和应用

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用语法：document.getElementByIdx_x_x(id) getElementsByName() 方法可返回带有指定名称的对象的集合语法：document.getElementsByName(name) 两者的不同点：（1）该方法与 getEleme
复制链接

扫一扫

专栏目录