文档对象模型（DOM）
文档对象模型是表示和操作HTML和XML文档内容的基础API，HTML文档的树状结构包含HTML标签或元素和表示文本字符串的节点。
可以当成族谱来理解，html上面应该还有一位大哥--Document
那么在一个节点之上就是父节点，之下就是子节点，隔壁就是兄弟节点，这个好理解。可以百度关于DOM树的详细点
树形的根部也就是最上面的节点是Document节点，它代表整个文档，代表HTML元素的叫Element节点，代表文本的叫Text节点，主要讲Document和Element两个重要的DOM类
要注意的是其他语言也有自己的节点，因此我们此处的Document和Element节点主要是指HTMLDocument和HTMLElement
选取文档元素
选取文档元素简称取元素，可以使用全局变量document（这个应该很熟悉）来引用Document对象。为了操作DOM中的元素，必须通过某种方式获得或选取这些引用文档元素的Element对象。DOM定义了许多方式获取元素
通过ID获取元素
任何HTML元素都可以有一个ID属性，在文档值中必须唯一，即不允许出现两个ID，这个是比较好取的，因为标识符是唯一的。可以使用getElementById（）方法选取基于唯一一个ID的元素
var oI = document.getElementById('id') //建议我们在取元素赋值变量的时候使用驼峰命名，一种比较好的规范
这里需要注意的是在IE8一下版本的浏览器中， getElement（）对匹配元素不匹配大小写，而且会返回匹配name属性的元素
通过name获取元素
HTML中的name最初打算为了表单元素分配名字，在表单数据提交到服务器时使用该属性的值。类似ID属性，name是给元素分配名字，但是区别于ID，name属性的值不是必须唯一的
基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName（）方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011084bef80c0e8fc4.jpg" alt="" name="img">
<p name="img">TEST</p>
</body>
<script>
var oI=document.getElementsByName('img')//获取所有name为img的值
oI[0].onclick=function(){
alert(1)
}
oI[1].onclick=function(){
alert(1)
}
</script>
</html>
需要注意的地方，首先是getElements是复数，也就是我们获取的是所有name为img的元素，是一个数组，可以通过下标获取对应元素，此时两个元素都是有点击效果的。其实这个提不提也不重要，getElementsByName（）是定义在HTMLDocument类中，不在Document类中，所以只有HTML文档可以使用此方法。同样的，IE8低配也返回ID属性匹配的元素，这个是相互的，了解一下
name还有一个比较厉害的特点，为某些HTML元素设置name属性的话，属性值将自动为Window对象中创建对应的属性，对Document对象也类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011084bef80c0e8fc4.jpg" alt="" name="img">
<p name="imgs">TEST</p>
</body>
<script>
var oI=document.img //Document对象中生成了img属性
var oIs=window.img //Window对象中生成了img属性
oI.onclick=function(){
alert(1)
}
oIs.onclick=function(){
alert(1)
}
</script>
</html>
p标签就不测试了，p标签不存在name效果。常见的name特点标签<form>、<img>、<iframe> 有兴趣可以自行了解一下
通过标签名选取元素
Document对象的getElementsByTagName（）方法可以用来选取指定类型（标签名）的所有HTML或XML元素。需要注意的是这里也是getElements，也就是所有的元素，不管你申明了多少标签，永远代表一个稀疏数组，目前可以这么理解，后续看看有没有必要提一下这个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011084bef80c0e8fc4.jpg" alt="" name="img">
</body>
<script>
var oI=document.getElementsByTagName('img')[0] //注意下标 获取的是第一个img标签
oI.onclick=function(){
alert(1)
}
</script>
</html>
Element类也定义过getElementsByTagName（）方法，原理与Document版本一样，区别就是它只选取该元素的后代元素，用起来也比较二，不过还是要提一下
比如说我要取到文档中一个<p>元素的span元素，可以这么取
var firstp=document.getElementsByTagName('p')[0]
var oSpan=firstp.getElementsByTagName('span') //好嘛 吃饱了撑的
通过css类选取元素
类选取与ID选取应该是比较常用的，getElementByClassName（）方法，这个其实跟ID一样没啥好说的。
我个人比较喜欢Document下的querySelectorAll（）方法，它的根据是css选择器。简单一点就是只要css样式中可以操作的元素都可以通过此方法取到，当然了你觉得这俩个没啥区别啊，所以就是你css选择器太薄弱了。
与之类似的就是querySelector（）方法，但只返回第一个元素，以文档顺序为主，如果没有匹配返回null，这是非常强大也是非常实用的取元素操作，小伙伴可以尝试多用用，用法就是括号里面的内容是css选择器的内容，也就是你用css 选取到的元素都可以使用querySelectorAll方法调用
document.all[]
看单词就能看懂哈，文档中所有元素的集合，建议不要使用但是可以运用......怎么说呢，因为我上次自己使用的时候浏览器奔溃了，但效果还是有的
比如说
document.all[0] //文档中第一个元素
document.all['navbar'] // id 或 name 为‘navbar’的元素
document.all.navbar //同上
document.all.tags('div')//文档中所有的div元素
有兴趣可以自己深入一下，小心浏览器奔溃
由于今天工作有点忙，先编辑这么点。
小番外
大多数的元素获取返回的数据称之为NodeList对象，此处又有一种新的延伸，有兴趣可以了解，当然这种还是理解在数组即可，还有其他的选择元素返回的HTMLCollection对象，doucument.images 与documents.forms返回的就是HTMLCollection对象，有兴趣可以百度了解一下
网友评论