@tsingwong 2016-02-16T16:28:58.000000Z 字数 2368 阅读 833

DOM day4

JavaScript DOM

DOM day4

1. js函数工作原理

getELementById和getElementsByTagName可以快捷找到文档中的某个或某些特定的元素节点，这些元素随后可以用诸如setAttribute（改变某个属性的值）和nodeValue（改变某个元素节点包含的文本）之类的方法和属性来处理。
这是绝大的多数JavaScript函数的工作原理。

2. document.write

document对象的write()方法可以方便快捷地把字符串插入到文档里。
其最大缺点是违背了“行动应该与表现分离”的原则。
只要有可能，就应该使用外部CSS文件代替<font>标签去设置和管理网页的样式信息，最好用外部JavaScript 文件去控制网页行为。故应该避免在<body>部分卵用<script>标签，避免使用document.write方法。

3. innerHTML属性

innerHTML属性可以用来读、写某给定元素里的HTML内容。

    <div id="testdiv">
        <p>This is <em>my</em> content.</p>
    </div>

用DOM的眼睛看testdiv内的标记是如下结构。

从innerHTML属性角度看testdiv的结构
此处输入图片的描述

当需要把一大段HTML内容插入网页时，innerHTML属性更合适。既支持读取，有支持写入。
一旦使用了innerHTML属性，其内容全部被替换。innerHTML属性不会返回任何对于刚才插入的内容的引用。
使用innerHTML属性可以把JavaScript代码从标记中分离出来，用不着再在标记的<body>部分插入<script>标签。

4. DOM方法

DOM是文档的表示，DOM所包含的信息与文档信息一一对应。DOM是一条双向车道。不仅可以获取文档的内容，煎熬了哟更新文档内容。改变DOM节点树，文档在浏览器里的成仙效果会发生变化。浏览器实际显示的是那颗DOM节点树。
在DOM看来，一个文档就是一颗节点树。如果想在节点树上添加内容，就必须插入新的节点。如果想添加一些标记到文档，就必须插入元素节点。

5. createElement 方法

    <div id="testdiv">
    </div>

想把一段文本插入testdiv元素。用DOM语言来说，想添加一个p元素节点，并把这个节点作为div元素节点的一个子节点。（div元素节点已经有一个子节点，即id属性节点，其值为testdiv）。
步骤如下：
1. 创建一个新的元素；
2. 把这个新元素插入节点树。
第一个步骤使用DOM方法createElement来完成。语法如下：

document.createElement(nodeName)

注：不论何时何地，只要使用了createElement方法，就应该把新创建出来的元素赋给一个变量。
这个时候新创建出来的元素，还不是任何一个DOM节点树的组成部分，称为文档碎片，还无法显示在浏览器窗口里。但它如其他节点一样拥有自己的DOM属性。

2. appendChild方法

把新创建的节点插入到某个文档的节点树最简单方法，让它成为这个文档某个现有节点的一个子节点。
可以使用appendChild方法，语法如下：

parent.appendChild(child)

3. createTextNode 方法

使用createTextNode方法可以创建文本节点。语法与createElement相似：

document.createTextNode(text)

4. insertBefore方法

insertBefore()方法，把一个新元素插入到一个现有元素的前面。涉及到三个元素。
1. 新元素：即想要插入的元素（newElement）。
2. 目标元素：把新元素插入到哪个元素（targetElement）之前。
3. 父元素：目标元素的父元素（parentElement）。
具体语法如下：

parentElement.insertBefore(newElement,targetElement)

故没必要搞清父元素到底是哪个，因为targetElement元素的parentNode属性就是父元素。在DOM中，元素节点的父亲一定是另一个元素节点。

5. insertAfter函数

DOM本身并没有提供insertAfter方法，但可以利用已有DOM方法和属性编写一个函数：

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

首先，函数有两个参数，一个是将被插入的新元素，另一个是目标元素；
将目标元素的parentNode属性保存到变量parent里；
接下来，检查目标元素是不是parent的最后一个子元素，即比较parent元素的lastChild属性值与目标元素是否存在"等于"关系；
如果是，使用appendChild方法把新元素追加到parent元素末尾；
如果不是，使用insertBefore方法将新元素插入到目标元素的下一个兄弟元素之前。目标元素的下一个兄弟元素即目标元素的nextSibling属性。