JavaScript讲义(三)

DOM:拥有用JS脚本动态修改HTML

DOM模型
---------------------------------------------------------
HTML文档只有一个根节点,其他都是子节点,最终形成一个结构化文档。DOM提供了访问结构化文档的一种方式,但DOM不是一种技术,它只是访问结构化文档的一种思想。基于这种思想,各种语言都有自己的DOM解析器。

DOM模型和HTML文档
---------------------------------------------------------
虽然JS不是一门纯粹的面向对象语言,但是DOM为常用HTML元素找到了一套完整的继承体系。
HTML元素之间常见的包含关系。有些HTML元素之间可以互相嵌套,有些不可。

访问HTML元素
---------------------------------------------------------
两种方式:根据ID访问HTML元素(document.getElementById()),利用节点关系访问HTML元素(利用父子,兄弟关系来访问)

访问表单控件
访问列表框、下拉菜单的选项

修改HTML元素
---------------------------------------------------------
修改节点(内容,属性,CSS样式)。修改HTML元素通常通过修改如下几个常用属性:
innerHTML: 如xx.innerHTML=document.getElementById("celVal").value;
value:
className:
style:
options[index]:

增加HTML元素
---------------------------------------------------------
两步:1)创建/复制节点;2)添加节点
var a=document.createElement("divxxx");
var ajax=ul.firstChild.nextSibling.cloneNode(false)
ul.insertBefore(ajax,ul.firstChild);

动态添加表格内容

删除HTML元素
---------------------------------------------------------
删除节点:removeChild

传统DHTML模型
---------------------------------------------------------
通过DOM不仅能访问和更新页面内容及结构,还能操纵文档的风格样式。在DOM出现前,JS采用传统DHTML模型访问和更新HTML页面。相比DHTML,DOM功能更强大,提供了对整个HTML文档的访问模型,其将文档转换为Tree结构,树上每个节点对应HTML元素。

使用window对象
---------------------------------------------------------
window对象是整个JS脚本运行的顶层对象。
访问历史:history属性。
访问页面URL:
客户机屏幕信息:screen属性
弹出新窗口:window.open()
用定时器:
navigator和地理位置:比如
for(var propname in window.navigator)
{
window.navigator[propname];
}
HTML5新增的geolocation属性:getCurrentPosition,watchCurrentPosition

使用document对象
---------------------------------------------------------
document对象既是HTMLDocument类的一个实例,也是DHTML模型中的一个对象。

时间: 2024-12-14 04:16:31

JavaScript讲义(三)的相关文章

JavaScript的三种工业化玩法

JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScript同样需要软件调试技术,希望本文总结的三种工具会对大家的学习有所帮助. 任何语言的学习都离不开实践,不写代码是永远学不会编程的,当然javascript也不例外,很多人推荐直接浏览器调试,个人觉得这个推荐应该是非常初级的,比如Chrome, Firefox确实提供了实用的前端调试工具,但是个人认为

[连载]JavaScript讲义(03)--- JavaScript面向对象编程

[连载]JavaScript讲义(03)--- JavaScript面向对象编程,布布扣,bubuko.com

[连载]JavaScript讲义(04)--- 函数和闭包

点击下载该例子的源代码 [连载]JavaScript讲义(04)--- 函数和闭包,布布扣,bubuko.com

JavaScript中有三个可以对字符串编码的函数,分别是: escape(),encodeURI(),encodeURIComponent()

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent . 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(string) 参数  描述  string  必需.要被转义或编码的字符串. 返回值 已编码的

JavaScript中有三个可以对字符串编码的函数

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent . 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(string) 参数  描述  string  必需.要被转义或编码的字符串. 返回值 已编码的

[连载]JavaScript讲义(06)--- 浏览器对象模型

[连载]JavaScript讲义(06)--- 浏览器对象模型

[连载]JavaScript讲义(05)--- 数据处理

[连载]JavaScript讲义(05)--- 数据处理

初探JavaScript(三)——JS带我碰壁带我飞

已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScript Dom 编程艺术>(ps:看过书评,网友对其褒贬不一,个人感觉还是不错的,适合初学者.不是每本书都能得到所有读者的认可,只能让部分适合的读者对其称赞,而我,就是其中一个). 前面介绍了JavaScript的一些常用方法,如何与DOM.HTML配合完成一些交互.今天主要介绍JavaScript在动画效

Ext JS学习第四天 我们所熟悉的javascript(三)

此文用来记录学习笔记: •javascript之函数 •this关键字的使用 –this关键字总是指向调用者,谁调用函数,this就指向谁 •call.apply的使用 –call和apply主要应用与框架底层,用于绑定函数的执行环境/作用域 •块的概念 –和高级程序语言不同,js里没有块的概念,我们一般用小括号包裹块级作用域 •闭包:掌握闭包必须要深入清楚的概念 –执行环境 –作用域链 –垃圾回收机制 附上栗子 代码 1 // This 关键字 在javascript里的使用 2 //this