获取html元素、操作DOM

获取html中元素的方法

document.getElementsByTagName() 方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象，可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。
HTML 标签名是大小写不敏感的，因此getElementsByTagName方法也是大小写不敏感的。另外，返回结果中，各个成员的顺序就是它们在文档中出现的顺序。

如果传入*，就可以返回文档中所有 HTML 元素。

var paras = document.getElementsByTagName('p');
var allElements = document.getElementsByTagName('*');

document.getElementsByClassName() 方法返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。参数可以是多个class，它们之间使用空格分隔。

var elements = document.getElementsByClassName(names);
var elements = document.getElementsByClassName('foo bar');

document.getElementsByName() 方法用于选择拥有name属性的 HTML 元素（比如、、、、和等），返回一个类似数组的的对象（NodeList实例），因为name属性相同的元素可能不止一个。

// 表单为 <form name="x"></form>
var forms = document.getElementsByName('x');
forms[0].tagName // "FORM"

document.getElementById() 方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。注意，该方法的参数是大小写敏感的。

var div = document.getElementById('main');

document.querySelector(） 根据选择器获取元素，方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}

DOM事件写法

<!-- 第一种写法： js代码在标签中完成-->
<input type="button" value="写法一" onclick="alert('被点了');">

<!--第二种写法： js代码一部分在标签中完成，没有完全分离，调用函数存在同名情况-->
<input type="button" value="写法二" onclick="f1();">
<!--第三种写法： 在script标签中完成js代码内容和行为完全分离，标签只写标签的属性，js做js操作-->
<input type="button" value="写法三" id="btn">

<script>
function f1() {
alert('写法二');
}
document.getElementById('btn').onclick = function () {
alert('写法三');
}
</script>