WebAPI

属性的操作

1. getAttribute()：获取一个img的src，或a链接的href

node.getAttribute('id')

2. creatAttribute()：用于创建（或获取）属性名

attribute = document.createAttribute(name)//参数name，是属性的名称

3. setAttribute()：用于设置属性和值

   var node = document.getElementById("div1");
   node.setAttribute("my_attrib", "newVal");  //括号中为“属性名+值”
   

4. removeAttribute()：用于删除对应属性

node.removeAttribute('id')

Element对象，属性（或方法）

1. 几个常用属性

nodeName：元素标签名，还有个类似的tagName

nodeType：元素类型

className：类名

id：元素id

children：子元素列表（HTMLCollection）

childNodes：子元素列表（NodeList）

firstChild：第一个子元素

lastChild：最后一个子元素

nextSibling：下一个兄弟元素

previousSibling：上一个兄弟元素

parentNode、parentElement：父元素

2. 查询元素

1. getElementById()

2. getElementByClassName()

   可以获取到一个或多个类选择器，返回的对象是一个类数组，可以通过下标去访问，但是没有push等调用数组的方法。

   我们可以获知，document.getElementsByClassName() 所调用的是html里类的集合，其类型为 HTMLCollection()，是一种页面元素的集合。

3. getElementsByName()

   通过此方法可以获取页面元素中带有name属性的html元素。比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

4. querySelector()、querySelectorAll()

5. getElementsByTagName()

   此方法返回所有指定标签的元素（搜索范围包括本身），返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。

3.创建元素

1. createElement() 创建一个新的元素放到页面上

2. createTextNode()

   光出现元素标签还不够，我们可通过**createTextNode()**去创建（或生成）一个文本，将文本的内容放入元素中

3. createDocumentFragment()

   该方法用来**生成一个存在于内存的dom片段，**但不属于当前文档。即不会生成一个标签，虚拟生成，常用于生成复杂的dom结构，然后插入当前文档。

   正因为它不属于当前文档，所以并不参与页面的渲染加载的过程，它的任何改动都不会引发网页的重新渲染。比直接修改当前文档的DOM有更好的性能表现。

4. 修改元素

1. appendChild()

   在元素末尾添加元素。把一个dom对象放入在另外一个对象的内部作为它的孩子

2. insertBefore()

   在某个元素之前插入元素

3. replaceChild()

   **replaceChild()**接受两个参数：要插入的元素和要替换的元素

5. 删除元素

​ removeChild() 用于删除元素

6. clone元素

​ 克隆一个完成的dom节点。

​ 方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身

document对象

1. 常用属性

 document.doctype
 document.title
 document.characterSet
 document.head
 document.body
 document.images

2. document.readyState

readyState属性 返回当前文档的状态，共有三种可能的值

• loading：加载HTML代码阶段，尚未完成解析
• interactive：加载外部资源阶段
• complete：全部加载完成

3. document.compatMode

compatMode 属性 返回浏览器处理文档的模式，可能的值为

• BackCompat：向后兼容模式，也就是没有添加DOCTYPE
• CSS1Compat：严格模式，添加了DOCTYPE

4. document.location

用于获取一个url

可直接使用location，如：

document.location === location //true
document.location === window.location  //true

总结：document.location === location === window.location

location属性返回一个只读对象，提供了当前文档的URL信息

5. document.write()

用**document.write()**方法时，即向当前文档写入内容，只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。