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

客官°小女子只卖身不卖艺 2022-06-12 13:07 299阅读 0赞

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>

<scripttype="text/javascript">

function getValue()

var x=document.getElementByIdx\_x\_x("myHeader");

alert(x.innerText);

//alert(x.innerHTML);

function getValue2()\{

//varn=document.getElementByIdx\_x\_x("name1");

varn=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>

<p>点击标题，会提示出标题1的值。</p>

<p>点击表单框，会提示出表单中的值。</p>

</body>

</html>

例子2：

<html>

<head>

<scripttype="text/javascript">

function getElements()

varx=document.getElementsByName("myInput");

alert(x.length);

</script>

</head>

<body>

<input id="myInput" type="text" size="20"/><br />

<input id="myInput" name="myInput11" type="text"size="20" /><br />

<input id="myInput11" name="myInput" type="text"size="20" /><br />

<br />

<input type="button"οnclick="getElements()"

value="How many elements named'myInput'?" />

</body>

</html>

例子3：

<html>

<head>

<scripttype="text/javascript">

function getElements()

//var x=document.getElementsByTagName\_r("input");

varx=document.getElementByIdx\_x\_x("d").getElementsByTagName\_r("input");

alert(x.length);

//getElementsByTagName\_r() 方法获取文档中的一个特定的元素

varmyParagragh = document.getElementsByTagName\_r("input")\[3\];

alert(myParagragh.value)

</script>

</head>

<body>

<br />

<input type="button"οnclick="getElements()"

value="How many input elements?"/>

</div>

</body>

</html>

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的个数

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JS中==和===的区别

相关 js中==和===的区别

相关 JS中==和===的应用场景

相关 js中==和===区别

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

相关 js中function和Function的区别

相关【JS】JavaScript中的‘===’和‘==’的区别

相关 JS中==和===的区别

相关 js中==和===的区别

相关 JS中 call、apply 和 bind 的区别及应用