DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口)。
虽然DOM标准规定Document节点的子节点可以是DocumentType,Element,ProcessingInstruction或Comment,但还有两个内置的访问其子节点的快捷方式。第一个就是
documnetElement属性,该属性始终指向HTML页面中的<html>元素。另一个就是通过childNodes列表访问文档元素,但通过documentElement属性则能更快捷、更直接地访问该元素。
documnetElement、firstChild和childNodes[0]的值相同,都指向<html>元素 var html=documnet.documnetElement; //取得对<html>的访问 alert(html===documnet.childNodes[0]); //true alert(html===documnet.firstChild); //true
修改tilte属性的值不会改变<title>元素。
想要取得文档中的所有元素,可以向getElementsByTagName()中传入"*",在JavaScript及CSS中,星号(*)通常表示“全部”,下面看一个例子:
var allElements=documnet.getElementsByTagName("*");
可以使用write()和writeIn()方法动态地包含外部资源,例如JavaScrip文件等。在包含JavaScript文件时,必须注意不能直接包含字符串"</script>",因为这会导致该字符串
被解释为脚本块的结束,它后面的代码将无法执行。为避免这个问题,只需加入转义符\即可,如下:
<body> <script type="text/javascript"> documnet.write("<script type=\"text/javascript\" scr=\"file.js\">"+ "<\/script>"); </script> </body>
在HTML中,标签名始终都以全部大写表示;而在XML(有时候也包括XHTML)中,标签名则始终会与源代码中保持一致。
var script=documnet.createElement("script"); script.type="text/javascript"; script.scr="client.js"; documnet.body.appendChild(script);
function loadScriptString(code){ var script=documnet.createElement("script"); script.type="text/javascript"; try{ script.appendChild(documnet.createTextNode(code)); }catch(ex){ script.text=code; } documnet.body.appendChild(code); }
下面是调用这个函数的示例:
loadScriptString("function sayHi(){alert(‘Hi‘);}");
以这种方式加载的代码会在全局作用域中执行,而且当脚本执行后将立即可用。实际上,这样执行代码与在全局作用域中把相同的字符串传递给eval()是一样的。
var link=documnet.createElement("link"); link.rel="stylesheet"; link.type="text/css"; link.href="style.css"; var head=documnet.getElementsByTagName("head")[0]; head.appendChild(link);
必须将<link>元素添加到<head>而不是<body>元素,才能保证在所有浏览器中的行为一致。
function loadStypeString(css){ var style=documnet.createElement("style"); style.type="text/css"; try{ style.appendChild(documnet.createTextNode(css)); }catch(ex){ style.stylesheet.cssText=css; } var head=documnet.getElementsByTagName("head")[0]; head.appendChild(link); }
调用这个函数的示例如下:
loadStypeString("body{background-color:red}");
JavaScript高级程序设计学习笔记--DOM,布布扣,bubuko.com
原文:http://www.cnblogs.com/Gyoung/p/3821309.html