JavaScript高级程序设计学习笔记--DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口)。

Document类型

文档的子节点

虽然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}");

转载于:https://www.cnblogs.com/Gyoung/p/3821309.html