JavaScriptDom模型（上）

　　JavaScriptDom模型（上）第一部分 Web API简介初识Web API
　　Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。
　　JavaScript的组成部分
　　2.Web API与API的关系
　　API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的摄像头拍摄画面。
　　Web API：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API。例如，console对象、document对象、window对象。
　　示例：
　　document.title = ＂设置新标题＂; // 设置页面标题
　　console.log(document.title); // 获取页面标题
　　document.write(＂网页内容＂); // 将字符串写入页面第二部分 DOM简介
　　1.什么是DOM
　　DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
　　W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中，诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面，都离不开DOM。
　　2.DOM树
　　DOM中将HTML文档视为树结构，被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
　　接下来针对DOM中各节点的专有名词解释如下：文档（document）：可以把一个页面当成一个文档元素（element）：页面中的所有标签都是元素节点（node）：网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有的节点都看作是对象，这些对象拥有自己的属性和方法第三部分 获取元素
　　1.根据id获取元素
　　document.getElementById(＂id＂)方法，是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。
　　2.根据标签获取元素
　　根据标签名获取元素的两种方式：可以通过document对象获取元素和通过element对象获取元素。
　　由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法，使用Array.isArray()也可以证明它不是一个数组。
　　getElementsByTagName()方法获取到的集合是动态集合，也就是说，当页面增加了标签，这个集合中也会自动增加元素。
　　3.根据name获取元素
　　document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。
　　4.HTML5新增的获取方式
　　HTML5中为document对象新增了querySelector()、querySelectorAll()和getElementsByClassName()方法。注意：这三种方式在使用时需要考虑到浏览器的兼容性问题。
　　5.根据类名获取
　　document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。
　　6.querySelector()和querySelectorAll()对象的属性
　　querySelector()方法用于返回指定选择器的第一个元素对象。
　　querySelectorAll()方法返回指定选择器的所有元素对象集合。
　　7.document对象的属性
　　document对象提供了一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等，document对象的常用属性如下表：
　　第四部分 事件基础
　　1.事件概述
　　事件是指可以被JavaScript侦测到的行为，是一种＂触发-响应＂的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。
　　2.事件三要素
　　事件三要素是指事件源、事件类型和事件处理程序这3部分。名词解释如下：事件源：触发事件的元素（谁触发了事件）事件类型：如 click 单击事件（触发了什么事件）事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）第五部分 操作元素
　　1.操作元素内容
　　在前面的内容中已经讲解了获取元素的几种方式，接下来将利用DOM提供的属性实现对元素内容的操作。常用的属性如下表所示：
　　innerHTML在使用时会保持编写的格式以及标签样式
　　innerText去掉所有格式以及标签的纯文本内容
　　textContent属性在去掉标签后会保留文本格式
　　2.操作元素属性
　　在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等，或者对于input元素来说，可以操作它的disabled、checked、selected属性等。
　　步骤：编写HTML结构代码获取元素注册事件处理程序操作元素样式
　　操作元素样式的两种方式：一种是操作style属性，另一种是操作className属性
　　1.操作style属性
　　元素对象的样式，可以直接通过＂元素对象.style.样式属性名＂的方式操作。样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线＂-＂，并将半字线后面的英文的首字母大写。
　　常见的style属性操作的样式名如下表：
　　2.操作className属性
　　在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为＂元素对象.className＂。访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名。如果元素有多个类名，在className中以空格分隔。第六部分 例题
　　一、练习查找元素的四种方法。页面中有若干列表项，如下图所示。香蕉有id值。香蕉、葡萄、柚子设置red样式类。设置四个按钮，分别设计代码，调用四种方法，体验效果。
　　按钮1：根据id查找，弹出消息框：香蕉
　　按钮2：根据标签名＂li＂查找，弹出消息框显示li个数
　　按钮3：根据class名＂red＂查找，弹出消息显示使用red的个数
　　按钮4：根据name名btn查找，弹出消息框显示btn个数
　　二、熟悉三种查找页面元素的方法，实现三个按钮的功能。
　　三、改变页面元素的属性，实现换头像功能。
　　四、给元素添加样式类
　　五、给元素添加多个样式类
　　第七部分 对照表
　　使用js操作css属性的写法是有一定的规律的：
　　1、 对于没有中划线的css属性一般直接使用style.属性名即可。
　　如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position等。
　　2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。
　　如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex， obj.style.fontFamily等。
　　3、这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。
　　这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用，这样操 作是无效的。
　　其正确的使用方法是为：IE:obj.style.styleFloat，其他浏览器:obj.style.cssFloat。
　　CSS 和 JavaScript 标签 style 属性对照表：
　　盒子标签和属性对照
　　CSS语法（不区分大小写）
　　JavaScript语法（区分大小写）
　　border
　　border
　　border-bottom
　　borderBottom
　　border-bottom-color
　　borderBottomColor
　　border-bottom-style
　　borderBottomStyle
　　border-bottom-width
　　borderBottomWidth
　　border-color
　　borderColor
　　border-left
　　borderLeft
　　border-left-color
　　borderLeftColor
　　border-left-style
　　borderLeftStyle
　　border-left-width
　　borderLeftWidth
　　border-right
　　borderRight
　　border-right-color
　　borderRightColor
　　border-right-style
　　borderRightStyle
　　border-right-width
　　borderRightWidth
　　border-style
　　borderStyle
　　border-top
　　borderTop
　　border-top-color
　　borderTopColor
　　border-top-style
　　borderTopStyle
　　border-top-width
　　borderTopWidth
　　border-width
　　borderWidth
　　clear
　　clear
　　float
　　floatStyle
　　height
　　height
　　width
　　width
　　margin
　　margin
　　margin-bottom
　　marginBottom
　　margin-left
　　marginLeft
　　margin-right
　　marginRight
　　margin-top
　　marginTop
　　padding
　　padding
　　padding-bottom
　　paddingBottom
　　padding-left
　　paddingLeft
　　padding-right
　　paddingRight
　　padding-top
　　paddingTop
　　颜色和背景标签和属性对照
　　CSS 语法（不区分大小写）
　　JavaScript 语法（区分大小写）
　　background
　　background
　　background-attachment
　　backgroundAttachment
　　background-color
　　backgroundColor
　　background-image
　　backgroundImage
　　background-position
　　backgroundPosition
　　background-repeat
　　backgroundRepeat
　　color
　　color
　　样式标签和属性对照
　　CSS语法（不区分大小写）
　　JavaScript 语法（区分大小写）
　　display
　　display
　　list-style-type
　　listStyleType
　　list-style-image
　　listStyleImage
　　list-style-position
　　listStylePosition
　　list-style
　　listStyle
　　white-space
　　whiteSpace
　　文字样式标签和属性对照
　　CSS 语法（不区分大小写）
　　JavaScript 语法（区分大小写）
　　font
　　font
　　font-family
　　fontFamily
　　font-size
　　fontSize
　　font-style
　　fontStyle
　　font-variant
　　fontVariant
　　font-weight
　　fontWeight
　　文本标签和属性对照
　　CSS 语法（不区分大小写）
　　JavaScript 语法（区分大小写）
　　letter-spacing
　　letterSpacing
　　line-break
　　lineBreak
　　line-height
　　lineHeight
　　text-align
　　textAlign
　　text-decoration
　　textDecoration
　　text-indent
　　textIndent
　　text-justify
　　textJustify
　　text-transform
　　textTransform
　　vertical-align
　　verticalAlign