第六周DOM

DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。

DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

DOM主要包括这几个个操作：创、增、删元素，获取元素，操作元素属性，事件操作。

创、增、删元素

1.创建
1.document.write

2.innerHTML

3.createElement

2.增加
1.appendChild

2.insertBefore

3.删除
1.removeChild

获取元素

这个分又为获取目标元素和获取元素内容

获取目标元素

可以通过Id，class，或者标签等多种途径获取目标元素
下面展示一些 例子。

// 举例
	<div></div>                          // 普通标签
    <div class="menu bar"></div>             //  含类标签
    <div id="box1"></div>               //   含id标签

		// 通过id获取
        var box  = document.getElementById('box1');   // 此时获取的是第三个div
        		// 通过class获取
        var box = document.getElementsByClassName('menu bar');   // 此时获取的是第二个div(只要是一“menu bar为class值的所有标签都会被获取”，返回结果是一个伪数组)
        		// 通过标签名获取
        var box = document.getElementsByTagName('div');  // 此时获取的是三个div，（元素有多个）获取的值也是一个伪数组，可以通过获取元素的[i]索引获取相应的目标标签

除了通过document在整个文件获取之外，也可以通过父元素element获取

//获取ol里的li
 <ul>
        <li id="ok"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

var ols=document.getElementsByTagName('ol')
    console.log(ols[0].getElementsByTagName('li'))//父元素必须是单个对象

HTML5新增选择器.querySelector(‘选择器’)

//根据选择器返回第一个元素对象
//选择器需要加符号
//    比如选择上面的ok为id的li
var ok=document.querySelector('#ok')
如果需要返回多个元素
使用.querySelectorAll('选择器')//返回指定选择器的所有对象集合

获取特殊元素

//1.获取body标签  同上 
var body=document.body 
//2.获取html标签，特殊处理
var html=document.documentElement

获取元素内容

// 举例
<div id="container">zkm<br>book</div>

//获取上面元素第一种方式
var box = document.getElementById('container');
alert(box.innerText);
第二种方式
alert(box.innerHTML);

innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。innerText 不识别 html 标签，非标准，去除空格和换行。

innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。innerHTML 识别 html 标签，W3C标准，保留空格和换行。

上方代码如果没有< br >,那么显示内容一致，否则.innerText会显示成“zkm
book”，而.innerHTML会将< br >转换成换行显示

修改元素属性

主要修改dom的元素属性，dom元素的内容、属性、表单的值等
使用 对象.属性=‘指定值’方法修改
1.修改元素属性：src、herf、title等
2.修改普通元素内容：innerHTML、innerText等
3.修改表单元素：value、type、disabled等
4.修改元素样式：style、className等

事件操作

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为，网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。
事件由三部分组成，
事件源，通过获取获取元素的方式获得
事件类型， JS常用事件(使用时在最前面加上on)
事件处理程序，通过函数赋值的方式完成

常用事件
        //  blur 失去焦点
        //  change 下拉列表选项中项改变或文本框内容改变
        //  click 鼠标点击  
        //  dbclick 鼠标双击
        //  focus 获得焦点
        //  keydown键盘按下
        //  keyup 键盘弹起
        //  load 页面加载完毕
        //  mousedown 鼠标按下
        //  mouseover 鼠标经过
        //  mousemove鼠标移动
        //  mouseout 鼠标离开
        //  mouseup 鼠标弹起
        //  reset 表单重置
        //  select 文本被选择
        //  submit 表单提

执行事件

大致分为三步，1.获取事件源 2.绑定事件，注册事件3.添加事件处理程序

<button id="btn">按钮</button>
//简单的事件，点击按钮就会弹出事件触发的提示
var btn=document.getElementById('btn')
btn.onclick=function(){
    alert('事件触发')
}

自定义属性操作

H5 自定义属性
目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

因为有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，所以H5新增了自定义属性

（1）设置 H5 自定义属性

H5 规定自定义属性 data- 开头作为属性名并且赋值

<div data-index="1"></div>

或者在 JS 中设置 element.setAttribute("data-index",2);

（2）获取 H5 自定义属性

兼容性获取：element.getAttribute(“data-index”)（兼容性好）
H5 新增：element.dataset.index / element.dataset[“index”]（IE11 才开始支持）（只能获取 data- 开头，dataset 是一个集合，里面存放了所有以 data 开头的自定义属性 ）

注：如果自定义属性里面有多个 - 连接的单词，获取时采取驼峰命名法

以下是对自定义属性的详细操作
(1）element.getAttribute(name) → 获取标签行内属性

（2）element.setAttribute(name，value) → 设置标签行内属性

（3）element.removeAttribute(name) → 移除标签行内属性

（4）与element.属性的区别: 上述三个方法用于获取任意的行内属性，包括自定义的属性。

（5）注意：以上方法的参数都是字符串格式。setAttribute 中传的参数 name 不需要进行属性名的修改，因为参数是字符串格式，和标识符不会有冲突。（例如：class 写作 class 就好，不用写成 className）

排他思想

排他思想
1.所有元素全部清除样式
2.给当前元素设置样式
3.注意顺序不能颠倒

举例实现功能，点击按钮，只有当前按钮改变背景色
	<button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

//获取所有按钮元素
var  btns=document.getElementsByTagName('button')
for(var i=0;i<btns.length;i++)
{
    btns[i].onclick=function(){
        //我们先把所有按钮背景颜色去掉
        for(var i=0;i<btns.length;i++)
        {
            btns[i].style.backgroundColor=''
        }
        //再改变当前元素的背景颜色
        this.style.backgroundColor='blue'
    }
}