循序渐进学编程7.DOM核心

7.1 web概述

web api概述

前面学习的叫做ECMAScript标准，接下来学习浏览器环境

标准库:ECMAScript中的对象和函数

web API:浏览器宿主环境中的对象和函数

1. 知识繁杂—比标准库多10倍，但是没必要完全都学习完,只学习最核心的知识;
2. 成体系的知识
3. 程序思维：知识 + 程序思维 = 应用
4. 兼容性：不同浏览器和同一浏览器不同版本–了解兼容不记忆

原生JS：纯Js，JQuery、框架、脚手架

web API:

• BOM:Brower Object Model,浏览器对象模型
• DOM:Doucument Object Model,文档对象模型

BOM:控制浏览器本身—浏览器这个软件
DOM:控制HTML文档—页面

ES 由ECMAScript规定的
Web API 由w3c(万维网联盟) 制定

关于DOM

• DOM 0:历史性的说法,第一次浏览器大战时
• DOM 1:w3c制定，当时微软没有遵守,IE4是遵守标准的，后面的版本就不遵守了;
• DOM 2
• DOM 3
• DOM 4 2015年

DOM是什么

DOM的核心理念，是将一个HTML或XML文档，用对象模型表示;每个对象称之为DOM对象

DOM对象又称之为节点Node

节点的类型：

• DocumentType，文档类型节点
• Doucument，文档节点，表示整个文档
• Comment，注释节点
• ELement，元素节点
• Text，文本节点
• Attribute，属性节点
• DocumentFragment,文档片段节点

DOM树:文档中不同的节点形成的树形结构。

7.2获取DOM节点

获取DOM节点

获取DOM对象

全局对象 window 中有属性document节点，代表整个文档节点

旧的获取元素节点的方式

DOM 0:

• document.body：获取body元素节点
• document.head：获取head元素节点

console.dir(对象属性)–可以查看对象结构

• document.links：获取页面上所有的超链接节点，类数组
• document.anchors：获取页面上所有的锚链接(现在是id属性，以前是指具有name属性)元素节点
• document.forms：获取页面上所有的form元素节点

新的获取元素节点的方式

通过方法获取

• document.getElementById：通过id获取对应id的元素
• document.getElementsByTagName：通过元素名称获取数组(类数组)
• document.getElementsByClassName：通过元素的类样式获取元素，IE9以下无效
• document.getElementsByName：通过元素的name属性值获取元素
• document.querySelector：通过CSS选择器获取元素，得到匹配的第一个，IE8以下无效
• document.querySelectorAll：通过CSS选择器获取元素，得到所有匹配的结果，IE8以下无效
• document.documentElement: 获取根元素

细节：

1. 在所有的得到类数组的方法中，除了querySelectorAll和querySelector，其他的方法都是实时更新的。
2. getElementById 得到元素执行效率最高。
3. 书写了id的元素，会自动成为window对象的属性。它是一个实时的单对象。事实上的标准。不推荐使用。

实时的单对象，如果又定义了(或者删除了同id名的元素)一个相同id名的全局变量，则会出问题；

4. getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll，可以作为其他元素节点对象的方法使用

根据节点关系获取节点

获取节点

• parentNode：获取父节点（元素、文档）

• previousSibling：获取上一个兄弟节点

• nextSibling：获取下一个兄弟节点

• childNodes：获取所有的子节点

• firstChild：获取第一个子节点

• lastChild：获取最后一个子节点

• attributes: 获取某个元素的属性节点

获取元素节点

• parentElement：获取父元素

• previousElementSibling：获取上一个兄弟元素

• nextElementSibling：获取下一个兄弟元素

• children：获取子元素

• firstElementChild：获取第一个子元素

• lastElementChild：获取最后一个子元素

获取节点信息

• nodeName：获取节点名称(只读)
• nodeValue：获取节点的值(固定，只有文本结点和注释结点才有，可读可写)
• nodeType：节点类型，是一个数字(查看结点类型图，可以用来分辨结点类型,只读)文本节点(3)

function retChildElementNodes (node) {
  var temp = {
      length:0,
      push:Array.prototype.push,
      splice:Array.prototype.splice, //长得看起来像数组
    },
    child = node.childNodes,
    len = child.length;
    for(var i = 0; i < len; i++) {
      if (child[i].nodeType === 1) {
        temp.push(child[i]);
      }
    }
    return temp;
}

• attributes :Element节点的属性集合

• 节点的方法
  节点的一个方法 Node.hasChildNodes();
  返回true or false

7.4 dom元素操作

dom元素操作

初识元素事件

元素事件：某个元素发生一件事（被点击 click）

事件处理程序：是一个函数，发生了一件事，应该做什么事情

注册事件：将事件处理程序与某个事件关联

this关键字在事件处理程序中指代当前发生的事件元素(指向被注册事件的元素)

获取和设置元素属性

• 通用方式：getAttribute、setAttribute — (推荐自定义属性使用这个方式),这两种获取属性的方式必须是写在html元素行间才能访问的到,得到的是原始写到html元素行间的属性值,而且setAttribute只能设置，不会渲染到页面上影响页面(但是图片可以修改src属性并且图片会渲染到页面上行)

可识别属性

正常的HTML属性

• dom对象.属性名：推荐

细节：

1. 正常的属性即使没有赋值，也有默认值
2. 布尔属性在dom对象中，得到的是boolean
3. 某些表单元素可以获取到某些不存在的属性(如<textarea>标签可以直接获取value,option标签也是如此)
4. 某些属性与标识符冲突，此时，需要更换属性名

label标签的for属性直接访问不到，需要用htmlFor访问，还有class类属性也不能直接访问，需要使用className访问，这样的标签并不多;

自定义属性

HTML5 建议自定义属性使用data-作为前缀

如果遵从HTML5 自定义属性规范，可以使用dom对象.dataset.属性名控制属性

所有属性如果没有赋值的话默认值为’’

dom对象.dataset是一个对象集合，里面有所有该dom对象的自定义属性

删除自定义属性(可识别属性无法删除)

• removeAttribute(“属性名”);
• delete dom.dataset.属性名

获取和设置元素内容

• innerHTML：获取和设置元素的内部HTML文本
• innerText：获取和设置元素内部的纯文本，仅得到元素内部显示出来的文本-和.firstChild.nodeValue类似的效果
• textContent：获取和设置元素内部的纯文本，textContent得到的是内部源代码中的文本(空格换行等)

元素结构重构

同一个dom元素在页面中只能在一个地方出现

• 父元素.appendChild(元素)：在某个元素(父元素)末尾加入一个子元素

父元素.append(元素,元素,元素)—可以填写多个参数，但是不建议使用，因为还不是正式的标准

• 父元素.insertBefore(待插入的元素, 哪个元素之前)
• 父元素.replaceChild(替换的元素, 被替换的元素)

试着自己封装一个父元素.insertAfter(待插入的元素,那个元素之后)
细节：

更改元素结构效率较低，尽量少用。

创建和删除元素

创建元素

• document.createElement(“元素名”)：创建一个元素对象

• document.createTextNode(“文本”)

• document.createDocumentFragment(): 创建文档片段—(相当于一块内存，存好许多元素之后将这个片段加入到页面，这样可以尽量少的更改元素结构，防止效率过低)

• dom对象.cloneNode(deep)：复制一个新的dom对象并返回–可以用于复制页面上已有的元素，加入或在其他地方使用，这样深度克隆所得的元素可以将元素的属性都拥有

deep是一个可选参数。如果省略的话，参数的默认值为 true，也就是说默认是深度克隆。如果想使用浅克隆, 你需要将该参数设置为 false。
深度克隆：如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.

childNodes也是实时集合

删除元素

• removeChild：父元素调用，传入子元素
• remove：把自己删除-不传入参数

7.6 dom元素样式

dom元素样式

控制dom元素的类样式

• className： 获取或设置元素的类名
• classList： dom4的新属性，是一个用于控制元素类名的对象(IE10以下不能使用)
  该属性的方法
  • add：用于添加一个类名
  • remove：用于移除一个类名
  • contain：用于判断一个类名是否存在
  • toggle：用于添加/移除一个类名

上面的属性IE浏览器存在兼容性问题,并且toggle属性除了IE浏览器以外其他浏览器都是支持第二个参数的，第二个参数填true,表示强制添加(不会移除了),填false,表示强制移除(不会添加了);

获取样式

CSS的短横线命名，需要转换为小驼峰命名

• dom.style：得到行内样式对象(行内样式中声明的样式-不是最终的样式)

如果设置了速写属性，则与此速写属性相关属性系统默认设置，值为initial(初始值)

• window.getComputedStyle(dom元素)：得到某个元素最终计算的样式
  • 可以有第二个参数，用于得到某个元素的某个伪元素样式,参数是’before’/‘after’…

style.样式名 得到的值一定是绝对值

dom.style.样式名 得到的值一定是行内样式的声明

设置样式

dom.style.样式名 = 值

设置的是行内样式。

下拉列表select有一个布尔属性叫做Multiple，表示里面的内容是可以多选的