JS WebAPI,DOM

WebAPI

1.API（Application Programming Interface,应用程序编程接口）,通俗的讲，API就是编程语言给我提供的一些工具，通过这些工具，我们可以非常轻易的完成一些功能。

2.Web API : 浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）, 通过这套API我们可以非常轻松的操作页面的元素和浏览器的一些功能。

3.任何开发语言都有自己的API

4.API的特征是输入输出（I/O）

5.API使用方法（console.log())

javascript组成

1.ECMAScript - JavaScript的核心：ECMAScript是一套标准, 规范了语言的基本语法和数据类型

与具体实现无关。

2.BOM - 浏览器对象模型： 一套操作浏览器功能的API

通过BOM可以操作浏览器窗口, 比如刷新、控制浏览器跳转等。

3.DOM - 文档对象模型： 一套操作页面元素的API

通过DOM提供的API可以获取/操作网页上的元素。

DOM

1.DOM ( Document Object Model ) 文档对象模型, 是W3C组织推荐的一套操作网页元素的API。

2.DOM又称为文档树模型, 因为整个HTML文档是一个树形的结构。

常见概念

1.文档 document : 一个网页可以称为文档 ; (换句话说: 操作页面,其实就是操作document)

2.节点node : 网页中的所有内容都是节点 (标签、属性、文本)

3.元素 element : 网页中的标签节点

4.属性：标签的属性

获取网页元素

1.根据id获取

document.getElementById()

功能：通过id 获取元素 document : 文档对象 get : 得到 element:元素 by:通过 id:id值 参数 : 字符串类型的id 返回值 : 一个元素 一个对象

var div = document.getElementById('div'); console.dir(div);

注： console.log打印一个元素的时候，是以标签的形式进行展示的

console.dir打印一个元素的时候，是以对象的形式进行展示的（对象是有类型的）

DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。

如果id不存在,返回值为null

2.根据标签名获取

getElementsByTagName

作用 : 根据标签名获取元素 参数：标签名 返回值：伪数组，无论有几个元素，返回都是伪数组

document.getElementsByTagName("tagName"); box.getElementsByTagName("tagName"); ​

//getElementsByTagNameNS 命名空间

var btns = document.getElementsByTagNameNS('*','button');

注： getElementByTagName获取的集合是动态集合

如果参数不存在,返回值为0

3.根据类名获取 getElementsByClassName 作用 : 根据类名获取元素 参数：字符串类型的类名 返回值：伪数组

document.getElementsByClassName("class")

4.根据name获取 getElementsByName 作用 : 通过name属性值 获取元素 参数 : name值 返回值 : 伪数组

var ps = document.getElementsByName("aa");

5.根据css选择器获取（重点）

document.querySelector();

简单选择器 : div .box #box 复杂选择器 : * div,p p.div div p div>p ​ 作用 : 根据css选择器获取

参数：是一个css选择器 如果是类选择器， .demo 如果是id选择器： #aa

返回值：只会返回一个对象，如果有很多个，会返回第一个

document.querySelectorAll();

参数：是一个css选择器 返回值：会返回伪数组，不管有多少个，都会返回伪数组

事件

1.事件： 理解为浏览器的感知系统 , 触发 --> 响应机制 javascript是基于事件驱动的。

2.事件三要素 : 事件源 + 事件名称 + 事件处理函数

事件源 : 给谁注册事件 ( 按钮 btn ) 事件名称 : 注册了什么事件 ( click事件 ) 事件处理函数 : 事件触发后要执行的代码(函数形式)

注：事件处理函数并不会立马执行，而是当事件触发的时候才会执行（浏览器会自动调用）

3.基本语法 :

var box = document.getElementById('box'); //on:当 click:点击 当按钮被点击的时候触发 box.onclick = function() { console.log('代码会在box被点击后执行'); };

属性

1.普通标签属性： 通过DOM设置普通标签属性，两边都会变化。常见的属性有：src、title、href、class、id等

2.表单属性操作： 常见的表单属性有：disabled、type、value、checked、selected

（1）disabled : 禁用 true : 禁用 false : 不禁用 （2）checked : 多选框和单选框选中 true : 选中 false : 不选中 （3）selected : 菜单下拉框选中 true : 选中 false : 不选中

在DOM对象中，他们的赋值.只要有值,很多都可以起到效果,但是为了统一规范, 使用 true/false

3.标签的自定义属性：

<div id="box" aa="bb"></div> // 给div标签中 添加不存在的未知属性aa, 这就是自定义属性

innerText 和 innerHTML

1.都是用来获取和设置标签的内容的。

2.innerHTML可以用于获取和设置标签的所有内容，包括标签和文本内容。

3.innerText可以用于获取和设置标签的文本内容，会丢弃掉标签。

4.innerHTML能够识别标签，标签能够生效；innerText只识别文本，标签会被转义。

处理兼容性问题

function getInnerText(element){ if(typeof element.innerText === "string"){ return element.innerText; } else { return element.textContent; } }

注：innerText是IE提出来的属性，因此低版本的火狐浏览器不支持这个属性。火狐有一个textContent属性，效果跟innerText一样，但是IE678不支持这个属性。

节点

1.节点分类： 元素节点、文本节点、属性节点、注释节点

2.节点常用的属性： nodeType: 节点类型 元素节点 = 1 属性-2(过时) 注释-8 文本-3 nodeName: 节点名称 nodeValue: 节点值 childNodes : 获取所有的子节点

3.查找节点 （1）childNodes:获取所有的孩子节点（包括了元素节点和其他很多类型的节点，基本不常用）

（2）children — 获取所有的子元素（用途很广泛），兼容性：IE678会把注释节点算上。

（3）firstChild 第一个子节点 firstElementChild 第一个子元素

（4）lastChild 最后一个节点 lastElementChild 最后一个子元素

（5）第几个元素 children[n] 第n个元素

4.兄弟节点： nextSibling:下一个兄弟节点 nextElementSibling:下一个兄弟元素

previousSibling 上一个兄弟节点 previousElementSibling 上一个兄弟元素

5.父亲节点 parentNode:父节点

创建节点

1.document.write（基本不用）: (1)可以生成新的节点，但是不推荐使用。 如果页面已经加载完成了，还是用document.write写内容的话，会把之前的页面给覆盖掉.

(2)document.write的本意就是在文档流上写入内容。如果页面没加载完成，文档流还是开着的，document.write直接在这个文档流上写东西

(3)如果页面加载完成了，还是用document.write写东西，会重新开启一个新的文档流，往新的文档流上写东西，旧的文档流就被新的文档流覆盖了。

window.onload = function () { document.write('你好') }

2.innerHTML (偶尔用):innerHTML创建节点的时候有一个特点，如果原来有内容的话，使用innerHTML会把原先的内容给干掉。

div.innerHTML = '<h1>你好</h1>'

3.createElement (常用)： 语法：var element = document.createElement("tagName");

作用：在内存里面创建了一个节点

返回：一个元素

var div = document.querySelector('div') var h1 = document.createElement('h1'); console.log(h1); h1.style.background = 'red'; h1.innerText = '哈'; div.appendChild(h1);

添加节点 (重点)

1.appendChild 在子元素的最后添加一个新元素

语法：parent.appendChild(newChild)

parent : 调用者，父节点来调用 newChild : 需要添加的那个孩子。

作用 ：把newChild添加到parent的孩子的最后面。

注：如果添加的是页面中本来就存在的元素，是一个剪切的效果，原来的就不在了。

克隆节点 (重点)

语法：var newNode = 节点.cloneNode(deep)

功能：在内存中克隆一份节点

参数：false / true

false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。

true: 深度复制，会复制标签，还会复制标签的所有内容 常用

var newNode = div.cloneNode(true); // false : 浅复制 只复制该元素 // true : 深复制 不仅复制该元素 还复制其子元素 ​ console.log(newNode);

注： 克隆出来的节点跟原来的节点没有关系，修改了也不会相互影响。

如果克隆的节点带了id，我们需要给id重新设置一个值，不让id冲突。

删除节点 (重点)

语法：

parent.removeChild(child);

解析 : 父元素.removeChild(子元素);

功能：有父盒子调用，删除里面的一个子元素。

使用1 : div.removeChild(p); ​ 使用2 : p.parentNode.removeChild(p);

替换节点

语法：parentNode.replaceChild(newChild, oldChild);

newChild用来替换 oldChild的新节点。 如果newChild已经存在于DOM树中，则它会被从原始位置删除。