慕课网js学习笔记（下-2）

1.认识DOM

        文档对象模型DOM，定义访问和处理html文档的标准方法；DOM将html文档呈现为带有元素，属性，文本的树结构（节点树）。

        节点属性表：

        遍历节点树：

        DOM操作：

2.getElementsByName()方法

        语法：document.getElementsByName(name);

        通过元素的name属性查询元素，返回的是元素的数组，而不是一个元素；和数组类似也有length属性。

3.getElementsByTagName()方法

        语法：document.getElementsByTagName(TagName)；//TagName代表标签。

        返回带有指定标签名的节点对象的集合；和数组类型也有length方法。

4.getAttribute()方法

        通过元素节点的属性名称获取属性的值

        语法：elementNode.getAttribute(name)；//name:元素的属性；elementNode：节点对象；返回值为属性的值。

5.setAttribute()方法

        setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

        语法：elementNode.setAttribute(name,value)；//name：属性；value：属性值；

6.节点属性

        在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

        1. nodeName : 节点的名称；2. nodeValue ：节点的值；3. nodeType ：节点的类型

        nodeName 节点的名称，是只读的。

        1. 元素节点的 nodeName 与标签名相同
        2. 属性节点的 nodeName 是属性的名称
        3. 文本节点的 nodeName 永远是 #text
        4. 文档节点的 nodeName 永远是 #document

        nodeValue 节点的值

        1. 元素节点的 nodeValue 是 undefined 或 null
        2. 文本节点的 nodeValue 是文本自身
        3. 属性节点的 nodeValue 是属性的值

        nodeType 节点的类型，是只读的。以下常用的几种结点类型:
        元素节点：1；属性节点：2；文本节点：3。

7.子节点childNodes

        访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，它具有length属性。

        语法：elementNodes.childNodes；//elementNodes：节点对象；返回子节点集合的一个数组。

        访问子节点的一个项：elementNodes.firtChild；//如果没有子节点则返回null

        恒等于elementNodes.childNodes[0]；

        访问子节点的最后一项：elementNodes.lastChild；//如果没有子节点则返回null

        恒等于elementNodes.childNodes[elementNodes.childNodes.length-1];

8.访问父节点parentNode

        获取指定节点的父节点；语法：elementNode.parentNode；//elementNode代表子节点对象。

9.访问兄弟节点

        1.nextSibling属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

        语法：nodeObject.nextSibling；//若无此节点，则该属性返回null

        2.previousSibling属性可返回某个节点之前紧跟的节点（处于同一数层级中）。

        语法：nodeObject.previousSibling；//若无此节点，则该属性返回null

10插入节点appendChild()

        在指定节点的最后一个子节点列表之后添加一个新的子节点。

        语法：父节点.appendChild（新增的子节点）

11.插入节点insertBefore()

        在已有的子节点前插入新的子节点。

        语法：父节点.insertBefore(newnode，node)；

12.删除节点removeChild()

        removeChild()方法从子节点列表中删除某个节点，如果删除成功，则返回被删除的节点，如果失败，则返回NULL。

        语法：父节点.removeChild（需要删除的节点）。

        删除的是DOM树上的节点，但该节点仍存在内存当中。

        如果需要完全删除该节点，可以给该方法的返回值赋值NULL。

13.替换元素节点replaceChild()

        replaceChild()实现子节点(对象)的替换。返回被替换对象的引用。

        语法：父节点.replaceChild(newnode，oldnode)；//newnode：用于替换oldnode，//oldnode：  被替换的对象。

14.创建元素节点createElement

        createElement()方法可以创建元素节点。返回新创建节点的对象。

        语法：document.createElement(TagName)；//TagName：需要创建的标签名

15.创建文本节点createTextNode

        createTextNode()方法可以创建文本节点。返回新创建节点的对象。

        语法：document.createTextNode(text)；//text：需要创建的文本。

        

转载于:https://my.oschina.net/u/3219122/blog/853414