javascript笔记整理系列

1 DOM简介

　当在浏览器中打开网页时，浏览器会接受网页的HTML文档并解析，构建文档结构的模型，并使用该模型在屏幕上绘制页面。模型是一个所见即所得的数据结构，改变模型会是的屏幕上的页面产生相应的变化。

2 文档结构

　可以将HTML文件想象成一系列嵌套的箱子，浏览器使用与之对应的数据结构来表示文档。我们将这种表示方式成为文档对象模型(DOM)。

3 树

DOM是树形结构，节点包含children，也可以追溯parent。
每个DOM节点对象都包含nodeType属性，该属性包含一个标识节点类型的数字代码。

4 节点Node

4.1 节点类型

• DOM中共有12种节点类型，在Node常量中。考虑IE兼容，使用数值比较判断。

  1. 元素：Node.Element_NODE(1)
  2. 属性：Node.Attribute_NODE(2)
  3. 文本：Node.TEXT_NODE(3)
  4. …

4.2 节点属性

1. nodeType：节点类型，通过与类型数值判断节点类型。
2. nodeName：节点名称

3. nodeValue：节点值

4. childNodes：子节点集合，NodeList对象，伪数组

   • childNodes[0]
   • childNodes.item(1)
   • childNodes.length：length属性瞬间快照，并非动态值。

5. parentNode：父节点

6. previousSibling：上一兄弟节点

7. nextSibling：下一兄弟节点

8. firstChild：第一个子节点

9. lastChild：最后一个子节点
10. ownerDocument：顶端节点

4.3 节点方法

1. hasChildNodes()：是否有子节点

2. appendChild(node)：插入子节点

3. insertChild(newNode，eferenceNode)：指定子节点前插入节点
4. replaceChild(newNode,oldNode)：替换节点

5. removeChild(node)：移除节点

6. cloneNode([isDeep])：克隆节点

   • true：深复制
   • false：浅复制
   • 只复制特性，不复制属性及事件
7. normalize()：处理文本节点

---

5 Document

5.1 document对象属性

1. 浏览器中，document: HTMLDocument: Document
2. document.documentElement -> html
3. document.body -> body
4. docume.doctype
5. document.title
6. document.URL：只读。
7. document.domain

8. document.referrer：只读。

9. document.anchors

10. document.forms
11. document.images
12. document.links

5.2 document对象方法

1. getElementById(id)：返回el对象
2. getElementsByTagName(tagname)：返回HTMLCollection类型对象，伪数组。
3. getElementsByName(name)
4. getElementsByClassName(class)

4 通过树结构访问节点

1. firstChild：指向第一个子节点
2. lastChild：指向最后一个子节点
3. previousSibling：上一个相邻节点。
4. nextSilbing：下一个相邻节点。
   。。。

5 查找元素

1. document.getElementsByTagName("selector");
2. document.getElementById("id");
3. document.getElementsByClass("class");

6 修改文档

1. removeChild()：从文档中移除特定节点。
2. appendChild()：添加子节点。
3. insertBefore()：将第一个参数表示的节点插入第二个参数表示的节点前。
4. replaceChild()：将第一个子节点替换为另一个节点。

7 创建节点

8 属性

9 布局

1. 块元素(Block)：自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；
2. 内联元素(Inline)：没有自己的独立空间，它是依附于其他块级元素存在的，因此对行内元素设置高度、宽度、内外边距等属性，都是无效的。

10 样式

11 层叠样式

12 查询选择器

1. querySelectorAll()
2. querySelector()

13 位置与动画