JS中getElementById()、getElementsByName()、getElementsByTagName() 的区别和应用
getElementById() 方法可返回对拥有指定ID 的第一个对象的引用
语法：ElementByIdx_x_x(id)
getElementsByName() 方法可返回带有指定名称的对象的集合
语法：ElementsByName(name)
两者的不同点：
（1）该方法与getElementById() 方法相似，但是它查询元素的name 属性，而不是id 属性。
（2）因为一个文档中的name 属性可能不唯一（如HTML 表单中的单选按钮通常具有相同的name 属性），所有getElementsByName() 方法返回的是元素的数组，而不是一个元素。
getElementsByTagName_r() 方法可返回带有指定标签名的对象的集合，返回元素的顺序是它们在文档中的顺序。
语法：ElementsByTagName_r(tagname)
提示：
(1)如果把特殊字符串"*" 传递给getElementsByTagName_r() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
(2)传递给getElementsByTagName_r() 方法的字符串可以不区分大小写。
例子1：
<html>
<head>
<script type="text/javascript">
function getV alue()
{
var ElementByIdx_x_x("myHeader");
alert(x.innerText);
//alert(x.innerHTML);
}
function getV alue2(){
//var ElementByIdx_x_x("name1");
var ElementByIdx_x_x("name2");
alert(n.value);
}
function id(x) {
if (typeof x == "string")
ElementByIdx_x_x(x);
return x;
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getV alue();">这是标题1</h1>
<p>点击标题，会提示出标题1的值。</p>
<input type="text" name="name1" id="name2" value="表单中的值" onclick="getV alue2();"/> <p>点击表单框，会提示出表单中的值。</p>
</body>
</html>
例子2：
<html>
<head>
<script type="text/javascript">
function getElements()
{
var ElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input id="myInput" type="text" size="20" /><br />
<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" onclick="getElements()"
value="How many elements named 'myInput'?" />
</body>
</html>
例子3：
<html>
<head>
<script type="text/javascript">
function getElements()
{
// var ElementsByTagName_r("input");
var ElementByIdx_x_x("d").getElementsByTagName_r("input"); alert(x.length);
//getElementsByTagName_r() 方法获取文档中的一个特定的元素
var myParagragh = ElementsByTagName_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" onclick="getElements()"
value="How many input elements?" />
<input type="submit" value="提交" />
</div>
</body>
</html>
getElementById:
语法：ElementByIdx_x(id)
参数：id ：必选项为字符串(String)
返回值：对象; 返回相同id对象中的第一个，如果无符合条件的对象，则返回null example：ElementByIdx_x("id1").value;
getElementsByName:
语法：ElementsByName(name)
参数：name ：必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：ElementsByName("name1")[0].value;
getElementsByTagName:
语法：ElementsByTagName_r(tagname) object可以是document或event.srcElement.parentElement等
参数：tagname：必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：ElementsByTagName_r("p")[0].childNodes[0].nodeV alue;
原生js和js的区别-------------------------------------------------------------------------------- getElementsByTagName_r() 不只是用在全局，更多的用法是：
obj可以是任何对象。
--------------------------------------------------------------------------------
var all = ElementsByTagName_r('div')[0].getElementsByTagName_r('*');
就是取ElementsByTagName_r('div')[0]这个节点下边的所有。
准确的说应该是所有Element类型的节点，不包括TextNode类型的节点。getElementsByTagName_r('*') *就像通配符一样，表示所有的TagName。
--------------------------------------------------------------------------------
它的长度就是li的个数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。