代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js控制HTML</title>
</head>
<body>
<p name="n1">1</p>
<p name="n1">2</p>
<p name="n1">3</p>
<!--name可以相同，id不可以相同-->
<script>
function text1() {
var num = document.getElementsByName("n1");
alert(num.length);
var n1 = num[1];
n1.innerHTML = "帅的一批";
}
text1();
//在js中可以直接调用，不一定非要某一事件触发，调用时后面方法的接收值（也就是后面括号和内容需要确定）
</script>
<!--通过name获取：这里长度输出的是3，可以验证，在有同名情况下，调用其值，返回整个同名的数组-->
<!--通过元素获取：改成getElementsByTagName("p")，效果一样-->
<P>
<a id="n2" title="天天向上" href="http://www.bilibili.com" name="n3">B站</a>
</P>
<script>
function text2() {
var n2 = document.getElementById("n2");
alert(n2.getAttribute("name"));
alert(n2.getAttribute("href"));
alert(n2.getAttribute("title"));
}
text2();
</script>
<!--getAttribute()方法获取属性，先通过获取元素后，再获取属性-->
<!--重点，难点-->
<!--a标签中如果id属性和name属性同同时存在，只能通过id获取元素,并且能调用name属性，反之错误
单独通过那么属性，只能获取其元素，调用length等默认的属性，不能调用title等属性。
在这么多调用属性的输出方法时，不会发生覆盖，一个一个调用-->
<P>
<a id="n3" title="落叶归根" name="n3">王力宏唱的</a>
</P>
<script>
var n3 = document.getElementById("n3");
n3.setAttribute("title","落叶归根太好听了");
alert(n3.getAttribute("title"));
</script>
<!--setAttribute动态设置元素属性，第一个参数是确定修改那个属性，第二个是修改的内容-->
<script>
function getChildNode() {
var childNOde = document.getElementsByTagName("body");
alert(childNOde.length);
}
getChildNode();
</script>
<!--获取子节点-->
</body>
</html>效果：
