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

JavaScript高级程序设计学习笔记--DOM的更多相关文章

  1. JavaScript高级程序设计---学习笔记(一)

    今天,2017.3.17开始利用课余时间仔细学习<JavaScript高级程序设计>,将需要掌握的知识点记录下来,争取把书里的所有代码敲一遍并掌握. 1.标识符命名最好是第一个字母小写,剩 ...

  2. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  3. JavaScript高级程序设计学习笔记第十章--DOM

    1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...

  4. JavaScript高级程序设计学习笔记第十一章--DOM扩展

    1.对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5 2.Selectors API Level 1 的核心是两个方法: querySelector()和 q ...

  5. javascript 高级程序设计 学习笔记

    <!--<script> // 异步请求封装 IE6即以上浏览器 // ajax(url,fnSucc,selectID,fnFaild) //url 请求地址 //fnSucc 异 ...

  6. JavaScript高级程序设计---学习笔记(二)

    面向对象程序设计1.属性类型.定义多属性.读取属性特性对象的属性在创建时都带有一些特征值,JavaScript通过这些特征值来定义它们的行为.这些特性是为了实现JavaScript引擎用的,因此不能直 ...

  7. JavaScript高级程序设计学习笔记第一章

    作为学习javascript的小白,为了督促自己读书,写下自己在读书时的提炼的关键点. 第一章: 1.JavaScript简史:Netscape Navigator中的JavaScript与Inter ...

  8. JavaScript高级程序设计学习笔记之事件

    1.事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播 ...

  9. 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

    1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...

随机推荐

  1. 分享一个自制的 .net线程池

    扯淡 由于项目需求,需要开发一些程序去爬取一些网站的信息,算是小爬虫程序吧.爬网页这东西是要经过网络传输,如果程序运行起来串行执行请求爬取,会很慢,我想没人会这样做.为了提高爬取效率,必须使用多线程并 ...

  2. .bat文件和Jar包的生成及运行

    .bat文件和Jar包的生成及运行 1.Jar包简单介绍 Jar包是Java中所特有的一种压缩文档,有点类似于zip包,区别在于Jar包中有一个META-INF\MANIFEST.MF文件(在生成Ja ...

  3. 【javascript】箭头函数

    ES6标准新增了一种新的函数:Arraw Function(箭头函数). x => x * x 这个函数相当于 function (x){ return x * x; } 题外话:user st ...

  4. iOS地图 -- 区域监听的实现和小练习

    区域监听用到的方法 [self.mgr startMonitoringForRegion:region]; --> 开启区域监听,没有返回值,在代理方法中得到信息并且处理信息 注:该方法只有用户 ...

  5. cocos2d-x 3.10 PageView BUG

    cocos2d-x 3.10 PageView 拖动滚动到下一个单元,没事件,3.11有修复.

  6. java 中的Scanner

    java.util.Scanner是Java5的新特征,主要功能是简化文本扫描.这个类最实用的地方表现在获取控制台输入,其他的功能都很鸡肋,尽管Java API文档中列举了大量的API方法,但是都不怎 ...

  7. Git初级实践教程(图文)

    关于Git Git的由来 Linux 的创始人 Linus Torvalds 在 2005 年开发了 Git 的原型程序.当时,由于在 Linux 内核开发中使用的既有版本管理系统的开发方许可证发生了 ...

  8. hibernate-cache

    hibernate缓存分:一级缓存.二级缓存.三级缓存 一级缓存:Session内的缓存 实例: /*一级缓存: * session内的缓存 * */ @Test public void test1( ...

  9. 搭建haproxy

    1:下载haproxy wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz2:解压,编译,安装 tar zxf hapr ...

  10. 使用IExport进行图片输出出现File creation error

    使用IExport进行图片输出(.JPG)时,出现如下异常File creation error.   在ESRI.ArcGIS.Output.ExportJPEGClass.FinishExport ...