JavaScript-DOM节点操作
二、DOM节点操作
在JavaScript中，可以通过以下2种方式来选中指定元素：
（1）getElementById()；
在JavaScript中，如果想通过id来选中元素，我们可以使用document对象的getElementById()方法。
getElementById()方法类似于CSS中的id选择器。
语法：
1
document.getElementById("元素id");举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="lvye">绿叶学习网JavaScript入门教程</div>
<script type="text/javascript">
var e = document.getElementById("lvye");
e.style.color = "red";
</script>
</body>
</html>
在浏览器预览效果如下：
分析：
这里使用document.getElementById()的方法获取id为lvye的div元素，然后把这个DOM对象赋值给变量e，然后使用DOM对象的style对象来设置div元素颜色为红色。
（2）getElementsByName()；
在JavaScript中，如果想通过name来选中元素，我们可以使用document对象的getElementsByName()方法。
语法：
document.getElementsByName("表单元素name值");说明：
getElementsByName()方法都是用于获取表单元素。
与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取。
注意，是getElementsByName()而不是getElementByName()。数组嘛，当然是复数。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input name="web" id="radio1" type="radio" value="HTML"/>
<input name="web" id="radio2" type="radio" value="CSS"/>
<input name="web" id="radio3" type="radio" value="JavaScript"/>
<input name="web" id="radio4" type="radio" value="jQuery"/>
<script type="text/javascript">
alert(document.getElementsByName("web")[0].value);
</script>
</body>
</html>在浏览器预览效果如下：
分析：
getElementsByName()方法在实际开发中比较少用，大家了解一下即可。
其实可以这样说， getElementById()和getElementsByName()这两种方法是“JavaScript选择器”。
除了getElementById()和getElementsByName()这两种方法，JavaScript还提供另外一种getElementByTagName()方法，这个方法类似于CSS中的元素选择器。但是getElementByTagName()方法有个很大缺点，它会把整个页面中相同的元素都选中。用起来也比较麻烦，实际开发中很少用到。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。