07.js基础知识-DOM

Web API简介

• 能够说出Web APIs阶段与js语法阶段的关联性
• 能够说出什么是API
• 能够说出什么是Web API

1. Web APIs和js基础关联性
2. API 和 Web API

Web APIs阶段

主要学习DOM和BOM,主要学习页面交互功能

API和Web API

API应用程序编程接口，是一些预定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

DOM

• 能够说出什么是DOM
• 能够获取页面元素
• 能够给元素注册事件
• 能够操作DOM元素的属性
• 能够创建元素
• 能够操作DOM节点

1. DOM简介
2. 获取元素
3. 事件基础
4. 操作元素
5. 节点操作

1.DOM简介

DOM是标准编程接口，通过DOM接口可以改变网页的内容，结构和样式获取的元素都是一个对象

DOM树：文档：一个页面就是一个文档，用document表示；

元素：html里标签都是元素，用element表示

节点：网页中所有内容都是节点（标签，属性，文本，注释），用node表示

DOM把以上内容都看做是对象

2.获取元素

1.根据ID获取；

1.var element = document.getElementById()返回的是一个对象

console.log(dir(对象名))打印我们返回的元素对象，更好的查看里面的内容

2.根据标签名获取；返回带有标签名的对象的集合,以伪数组形式存储

document.getElementsByTagName('标签名')

得到页面中特定元素通过 var nav = document.getElementById(‘标签名’);var arr = nav.getElementsByTagName('标签名');

3.通过HTML5新增的方法获取；新增方法

document.getElementsByClassName('类名');返回元素对象集合

deocument.querySelector('.nav')返回指定选择器的第一个对象

document.querySelectorAll('选择器')返回指定选择器的所有对象

4.特殊元素获取body,html

获取body元素：document.body

获取html元素：document.documentElement

3.事件基础

事件：触发相应机制

事件三要素：事件源，事件类型，事件处理程序

事件源.事件类型 = function(){事件处理程序}

执行事件的步骤：1.获取事件源 2.注册事件（绑定事件） 3.添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

oncilck鼠标点击事件；onmouseover鼠标经过触发；onmouseout鼠标离开触发；onfocus获得鼠标焦点触发；onblur失去鼠标焦点触发；onmousemove鼠标移动触发；onmouseup鼠标弹起触发；onmousedown鼠标按下触发

4.操作元素

1.获取和改边元素内容：element.innerText不识别html标签并且1去除空格和换行非标准;element.innerHTML

2.修改元素属性例如 src,id,title通过.属性名即可实现

3.修改表单属性设置如type,value,checked,selected,disabled

表单里的值通过value来修改，如果想要表单被禁用不能再点击this.disabled=true

element.style行内样式操作；elementclassName类名样式操作

element.getAttribute('属性')获取属性值，主要获得自定义的属性

element.setAttribute('属性名','属性值')用来修改属性值

element.removeAttribute('属性名')删除属性

自定义属性主要是为了保存和调用

h5规定自定义属性为data-开头！

5.节点操作

利用DOM提供的方法获取元素逻辑性不强和繁琐，于是利用节点层级关系获取元素

节点基本属性：nodeType节点类型，nodeName节点名称，nodeValue节点值

元素节点nodeType为1；属性节点nodeType为2，文本节点nodeType为3，文本节点包含文字，空格，换行。节点操作主要操作元素节点

获取父级节点：子节点.parentNode,,找不到返回null

获取子节点：parentNode.childNodes ///////(换行也是文本节点)如果只想要获得里面的元素节点，则需要专门处理

获取子元素：parentNode.children;.children[i];firstChild获取第一个子节点；lastChild获取最后一个节点；firstElementChild返回第一个子元素节点；lastElemntCild返回最后一个子元素节点

得到兄弟节点：.nextSibling得到下一个节点,previousSibling得到兄弟元素节点，nextElementSibling得到下一个元素节点，previousElementSibling得到前一个元素节点

document.createElement('tagName')动态创建元素节点

node.appendChild(child)添加节点

node.insertBefore(child,'指定元素')在指定元素前插一个孩子

删除节点：node.removeChild(child)

复制节点：node.cloneNode()拷贝节点

如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点

node.cloneNode(true)深拷贝复制里面内容

三种动态创建元素的区别

document.write();element.innerHTML,document.createElement()

document.write是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘

innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高，结构稍微复杂

createElement()创建多个元素效率稍低一点，但是结构更清晰

DOM总结

1.创建元素：document.write;innerHTML,createELement

2.增加元素：appendChild();insertBefore

3.删除元素:removeAttribute

4.修改元素：修改元素属性;修改普通元素内容：innerHTML,innerText;修改表单元素:value,type,disable;修改元素样式:style,className

5.查询元素：querySelector,querySeceltorAll;利用节点操作：父子兄

6.属性操作：setAttribute设置属性;getAttribute得到属性；removeAttribute移除属性