蜜果私塾:DOM,黑色艺术的终结者(3)
——使用DOM动态创建HTML内容
文:阿蜜果/2011-11-2
转载请注明出处
网页的结构由HTML文档负责创建,JavaScript函数只用来改变HTML文档的某些细节而不改变其底层结构,JavaScript也可以用来改变网页的结构和内容。
创建HTML内容的“老”技巧是使用document.write()方法和innerHTML属性。
document的write()方法可以方便快捷的将字符串插入到文档中,如下面示例中在网页上使用该方法显示“使用write()方法输出的内容”:
使用document.write()方法的最大缺点是违背了“分离JavaScript”原则,当然也可以将这一句提供一个公用的JS方法,放在一个独立的js文件中,例如在example.js中编写如下js方法:
将之前的HTML文件修改为如下内容:
但就算这样做还是没有解决“分离JavaScript”的问题,需要在<body>元素中插入JS代码,使用document.write()动态构建HTML内容的缺点如下:
(1)将JavaScript和HTML代码混杂在一起,使得HTML不容易编辑,也无法享受把行为和结构分离出来的好处;
(2)这样拼接HTML字符串很容易导致“数据/格式非法”的错误;
(3)MIME类型设置为application/xhtml+xml与document.write()方法不兼容,浏览器在呈现xhtml文档时不会执行document.write()方法。
现在几乎所有的浏览器都支持属性innerHTML,但这个属性并不是W3C DOM标准的组成部分,他初见于IE 4浏览器,被被其它浏览器所接受。
该属性可用于读、写给定元素的HTML内容,例如使用innerHTML属性更新id为testdiv元素的HTML内容为:“<p>测试<em>innerHTML</em>属性</p>”,innerHtmlExample.js文件中的JS代码如下:
对应的HTML的代码如下所示:
innerHTML属性比document.write()方法更值得推荐,使用该属性还可以遵循“分离JavaScript”的原则。在需要将一大段HTML代码插入一份文档,使用innerHTML属性设置既简单又快速,但是使用该属性的缺点也很明显:
(1)不会返回任何可以用来对刚插入的内容进行处理的内容,导致无法对刚插入的内容进行处理,无法提供DOM的众多操作功能;
(2)只使用于HTML文档,在浏览器呈现xhtml文档时不会执行该属性;
(3)是一项专利技术,而不是一项业界标准。
该方法用于创建一个元素节点,该方法返回一个Element对象,语法如下:
其中name属性是字符串值,用于为元素节点规定名称。
【提示】如果name参数中含有不合法的字符,该方法将抛出代码DOMException 异常,代码为INVALID_CHARACTER_ERR 。
下面语句用于创建一个p元素:
该方法常与而后说到的appendChild()和createTextNode()合作使用,这个方法单独使用是没有实际用处的,因为它并没有将创建的元素插入到文档中。使用该方法将创建出的元素赋予一个变量后,该变量指向刚创建出来的元素的引用指针。这个元素是具有自己的nodeType和nodeName,如下所示:
测试时,提示框显示信息为:
由此可知此时新节点已经存在,并且从nodeType为1,可看出它是一个元素节点。
该方法指定元素节点的最后一个子节点之后添加节点,该方法返回新的子节点,语法:
其中node参数为必填参数,表示要添加的节点。
例如我想将p元素添加到id为testdiv的div元素下去,参考代码如下:
在2.2小节中我们创建的是一个空白的p元素,若需要为p元素设置文本,需要使用createTextNode()方法创建一个文本节点。该方法的语法与createElement()方法类似:
该方法返回Text对象,其中text参数为字符串值,可规定次节点的文本。例如创建“你好”的文本节点,语句如下:
可以将该方法返回的值赋给一个变量,那么这个变量将指向那个文本节点的引用指针。与createElement()方法相似,该方法也只是负责创建新的节点,但并不会加入到文档中,需要使用appendChild()等方法加入。
改造2.2小节中实例,给p元素加上“你好”的文本,代码参考如下:
【提示】因为变量里存储的是引用指针,所以将上述代码的两句appendChild对换一下,也不会影响页面的显示。
该方法可在已有的子节点插入一个新的子节点,它返回新的子节点。语法如下:
其中:
(1)parentElement:这两个参数中指定的元素的父元素;
(2)newChild参数:表示插入新的节点;
(3)refChild参数:表示在此节点前插入新节点。
在如下实例中,首先在id为testdiv的div元素内添加p元素,并设置其文本节点为“你好”,接着将另一个文本子节点为“Amigo,”的p元素添加到它的前面,参考代码如下:
测试页面显示为:
(1)《XML DOM createElement()方法》
http://www.w3school.com.cn/xmldom/met_document_createelement.asp
(2)《XML DOM appendChild()方法》
http://www.w3school.com.cn/xmldom/met_element_appendchild.asp
(3)《XML DOM createTextNode()方法》
http://www.w3school.com.cn/xmldom/met_document_createtextnode.asp
(4)《JavaScript DOM编程艺术》 [英] Jeremy Keith 著,杨涛、王晓云等译,人民邮电出版社出版