从这一节开始，我会花1-2天的时间来带大家学习一下DOM
那么什么是DOM呢。DOM就是文档对象模型，说的通俗一点就是你当前所在写的页面，至少这是我的理解，在看dom的内容之前，请确认一下你是否会使用HTML CSS来编写页面，如果不会的话，请去隔壁W3C或者菜鸟教程去学习一下HTML CSS或者HTML5 CSS3
然后你需要了解如下几点:
**
文档(Document) ：就是指HTML或者XML文件
那么什么是DOM呢。DOM就是文档对象模型，说的通俗一点就是你当前所在写的页面，至少这是我的理解，在看dom的内容之前，请确认一下你是否会使用HTML CSS来编写页面，如果不会的话，请去隔壁W3C或者菜鸟教程去学习一下HTML CSS或者HTML5 CSS3
然后你需要了解如下几点:
**
文档(Document) ：就是指HTML或者XML文件
节点(Node) ：HTML文档中的所有内容都可以称之为节点，常见的节点有
元素节点 属性节点 文本节点 注释节点
元素(Element) ：HTML文档中的标签可以称为元素**
我们如果需要获取一个节点的时候，我们会
- document.getElementById("id"); // 通过元素的ID获取节点
- document.getElementByName("name属性"); 通过元素的name属性获取节点
- document.getElementByTagName("元素标签"); //通过元素标签获取节点
- // 高级浏览器还支持的方法
- document.getEmelentByClassName("类名"); 通过元素的类名获取节点
如果我们需要给某个节点添加属性或者绑定事件
- var ele =document.getElementById("id"); //获取到ID为id的节点
- ele.href=“” //添加链接(图片什么的原理相同，图片是src=”“)
- ele.onclick=function (){} //点击触发匿名事件
获取与设置节点的属性
getAttribute: (获取)
getAttribute: (获取)
- <!DOCTYPE html>
- <html>
- <head>
- <style type="text/css">
- </style>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <body>
- <a href="#" onclick="a()">a</a>
- <script type="text/javascript">
- function a(){
- var a=document.getElementsByTagName("a")[0]; //获取到在第一个的a标签
- //只能通过getElementByIagName()的方式来获取到当前的节点
- console.log(a.getAttribute("href"));
- //通过a的getAtrribute()函数来获取节点的href属性
- }
- </script>
- </body>
- </html>
setAtrribute：（设置）
a.setAttribute('title','node') //给a节点添加title的属性，值为node
也许有人会问，我获取的时候为什么后面有[0]，直接那多好，那是因为通过TagName获取到的是整个页面的这个tagname的节点，是一个数组，我们需要通过索引来拿到所需要的节点.
