DOm介绍

2015-06-20

DOM的基本知识

Dom 文档对象模型
D-document 文档 O-Object 对象 M-module 模型
文档：html 文件或者xml文件
    html文件侧重展示
    xml文件侧重于存储
DOM理解为树形结构图---树状图
DOM的目的：通过JS代码操作页面中元素（DOM是文档，标签是对象）
DOM把页面上每一个标签都视为对象，获取对象，通过点的方式添加属性或者时间处理函数。

DOM可用做什么？

 找对象（元素）
 设置元素的属性
 设置元素的样式
 动态创建和删除元素
 事件触发响应
 事件源（事件的触发者）
 事件响应程序
 页面中所有的内容 (标签,换行,文字) 实际上都是字符串 
DOM操作页面元素
BOM操作浏览器内容

元素，标签

标签叫元素，也可以叫对象。元素 Element
标签可以嵌套：父子元素
标签和标签如果是同级元素：兄弟节点或兄弟元素或兄弟标签 

页面中顶级标签：html 
（HTML文档可以由节点构成的集合，DOM节点有：
1 元素节点 如<html> <body> <p>
2 文本节点 向用户展示的内容如<li>...</li>中的JavaScript、DOM、CSS等文本。
3 属性节点：元素属性，如<a>标签的链接属性href="http://www.imooc.com"。）
浏览器中所有的顶级对象是window
页面中的顶级对象是document
页面中document最大
但window包含document,window可以省略不写

DOM操作

DOM操作：操作本地内存中的数据
通过DOM操作页面中的元素，其显示方式发生了改变。但没修改原来的页面内容 【服务器端页面】。 通过网站访问页面，访问的是服务器端的页面，网络将页面内容下载到本地内存，渲 染引擎在加载页面的同时会在内存中生成一个DOM树。所以，DOM操作的是

为标签注册（点击）事件

1 为单个标签注册点击事件
document.getElementById("Id的值")
通过id获取标签 注册点击事件，添加事件处理函数
 2 为多个标签注册点击事件： 
 document.getElementByTagName("标签的名字")
  先通过标签名获取标签，构成伪数组【个数不限】 通过循环遍历 通过循环遍历，注册点击事件，为每个标签添加点击事件【this.属性，不用索引方 式】

区分HTML中属性，还是CSS中属性 中属性ҁ对象.style.属性 ) 对象.style.属性 ) 如果属性是多个单词组合中间有-的,到了DOM操作的js代码中,把-去掉,-后面的单词首 字母要大写

获取元素的四种方式

 1 document.getElementById("Id的值") 返回的是一个元素对象
 2 document.getElementByTagName("标签的名字")，返回的是一个伪数组【用好索引，或属性值】不能数组.属性
 例：<input type="button" id="btn">
 <select name="haha" id="ss">
    <option value="hh">上海</option>
    <option value="hh">北京</option>
    <option value="hh">郑州</option>
 </select>
 <script>
    document.getElementById("btn").onclick=function(){
        document.getElementById("ss").getElementsByTagName("option")[1].selected=true'
    }
 </script>
3 document.getElementsByName("nsme属性的值")，返回的是一个伪数组
4 document.getElementsByClassName("类样式名字")    返回一个伪数组    获取相同类样式（相同类名）的元素，得到伪数组

阻止超链接默认跳转 return false

如果给a标签添加事件，由于a具有跳转效果，会先执行自己设置的事件，然后执行默认的跳转效果
Javascript; 伪协议