《JavaScript DOM 编程艺术》 第7章 笔记

第7章 动态创建标记

///

三个方法：

一些传统方法：document.write和innerHTML

DOM方法

///

document .write方法：

例：<script>

document.write("<p>This is inserted.");

</script>

缺点：违背了“行为应该与表现分离”的原则，尽量避免用这种方法。

//

innerHTML属性：

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

例：在js文件中

window.οnlοad=function()

{

var testdiv=document.getElementById("testdiv");

testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";

}

一旦使用innerHTML属性，它的全部内容都将被替换。

///

<div id="testdiv">

<p>This is <em>my</em> content.</p>

</div>

用DOM的眼睛看testdiv内的标记，如图所示：

DOM方法：

你不是在创建标记，而是在改变DOM节点树。做到这一点的关键是一定要从DOM的角度去思考问题。

用DOM的语言来说，想添加一个元素节点，分两步完成：

（1）创建一个新的元素，对应createElement方法；

（2）把这个新元素插入节点树，对应appendChild方法。

1.createElement方法

例：创建一个p元素并赋给一个变量：

var para=document.createElement("p");

虽然p元素已经存在了，但它还不是任何一棵DOM节点树的组成部分，它只是游荡在JavaScript世界里的一个孤儿。它这种情况成为文档碎片

2. appendChild方法

例： var testdiv=document.getElementById("testdiv");

var para=document.createElement("p");

testdiv.appendChild(para);

这相当于：document.getElementById("testdiv").appendChild(document.createElement("p"));

3.createTextNode方法

这方法用来创建一个文本节点

例：var txt=document.createTextNode("Hello world");

para.appendChild(txt);

这是上图的创建代码：

var para=document.createElement("p");
var txt1=document.createTextNode("This is ");
para.appendChild(txt1);
var emphasis=document.createElement("em");
var txt2=document.createTextNode("my ");
emphasis.appendChild(txt2);
para.appendChild(emphasis);
var txt3=document.createTextNode("content.");
para.appendChild(txt3);
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);

///

在已有元素前插入一个新元素

（1）新元素：你想插入的元素（newElement）。

（2）目标元素：你想把这个新元素插入到哪个元素（targetElement）之前。

（3）父元素：目标元素的父元素（parentElement）。

语法：parentElement.insertBefore(newElement,targetElement)

元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）。

没有insertAfter()方法，但可编写：

function insertAfter(newElement,targetElement)
{
var parent=targetElement.parentNode;
if(parent.laseChild==targetElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement,targetElement.nextSibling);//目标元素的下一个兄弟元素即目标元素的nextSibling属性
}
}