盆景园林网页制作html dom

1、 HTML DOMPrimary ContentWhat is Html DOM?Window objectDocument objectNavigator objectHistory objectHTML DOM Html Dom DOMDocument Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件 。HTML DOM是HTML Document Object Model(文档对象模型)的缩写，专门适用与HTML/XHTML的文档对象模型. 定义了访问和操作HTML文档的标准方法.HTML DOM Html DomHTML

2、 DOM它将网页中的各个元素都看作一个个对象，把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）从而使网页中的元素也可以被计算机语言获取或者编辑Javascript可以利用HTML DOM动态的修改网页;例如添加、移除、改变或重排页面上的元素DOM 是这样规定的：整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）HTML DOM浏览器对象简介 Window 窗口对象location地址对象document文档对象F

3、ORM表单对象浏览器对象的分层结构window.document.myform.text1 浏览器对象的分层结构window对象 window对象介绍 window对象是浏览器窗口对文档提供一个显示的容器，是每一个加载文档的父对象。window对象还是所有其他对象的顶级对象，通过对window对象的子对象进行操作，可以实现更多的动态效果。 window对象的使用方法 window对象代表当前打开的浏览器窗口，其作为顶级对象。window对象的方法和属性的调用和其它对象一样，区别是window对象不需要创建即可直使用。需要注意的是window对象名称是小写。Window对象常用属性status指

4、定当前窗口状态栏中的信息screen有关客户端的屏幕和显示性能的信息history有关客户访问过的URL信息location有关当前URL的信息document代表浏览器窗口的HTML文档frames是一个数组，其中内容是窗口中所有的框架parent指当前窗口的父窗口self指当前窗口top代表当前所有窗口的最顶层窗口window代表当前窗口defaultStatus状态栏的默认信息/获取window对象所有属性for(var i in window) document.write(“window property(”+i+”):”+windowi+”); Window对象常用方法alert(

5、“提示信息”)显示一个带有提示信息和确定按钮的对话框confirm(“提示信息”)显示一个带有提示信息、确定和取消按钮的对话框prompt(msg,defval)打开用户交互对话框，返回用户输入值。open(“url”, ” name”)打开具有指定名称的新窗口，并加载给定URL所指定的文档；如果没有提供URL，则打开一个空白文档close()关闭当前窗口showmodaldialog()在一个模式窗口中显示指定的HTML文档settimeout(“函数名”,”毫秒数”)设置定时器，经过指定毫秒值后执行某个函数Window对象常用事件onBlur或onFocus当窗口后置或前置时，激活相应的程

6、序。onLoad当文档加载处理完成后，激活加载事件。onResize 当用户重设窗口大小，将触发重设大小事件。onUnload当文档从view内清除前，触发卸载事件status属性状态栏控制（status属性）浏览器状态的显示信息可以通过window.status属性直接进行修改。例如：window.status=看看状态栏中的文字变化了吗？;系统对话框 （1）window.alert(message) alert()方法前面已经反复使用，它只接受一个参数，即弹出对话框要显示的内容。调用alert()语句后浏览器将创建一个单按钮的消息框。系统对话框 （2）window.confirm(mess

7、age) 该方法将显示一个确认提示框，其中包括“确定”和“取消”按钮。用户单击“确定”按钮时，window.confirm返回true；单击“取消”按钮时，window.confirm返回false。if (confirm(确实要删除这张图片吗？)alert(图片正在删除);elsealert(已取消删除！);系统对话框 （3）mpt(message , default) 该方法将显示一个消息提示框，其中包含一个文本输入框。var nInput=prompt(请输入你的名字,);if(nInput!=null)document.write(Hello! +nInput);使

8、用window对象open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height： 窗口高度； width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes或1为允许 location： 是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许；我们需要预先制作好注册页面，假设为register.html，打开注册窗口的语句如

9、下 open(register.html, 注册窗口, toolbars=0, location=0, statusbars=0,menubars=0,width=700,height=550,scrollbars=1);通过open方法打开注册页面之后的效果Document 对象Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。可以通过脚本对 HTML 页面中的所有元素进行访问。Document对象 Document 对象集合描述all提供对文档中所有 HTML 元素的访问。anchors返回对文档中所有 Anchor 对象的引用。applets返回对文

10、档中所有 Applet 对象的引用。forms返回对文档中所有 Form 对象引用。images返回对文档中所有 Image 对象引用。links返回对文档中所有 Area 和 Link 对象引用。Document对象 Document 对象属性属性描述body提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 cookie设置或返回与当前文档有关的所有 cookiedomain返回当前文档的域名lastModified返回文档被最后修改的日期和时间referrer返回载入当前文档的文档的 URLtitle返回当前文档的标题URL返回当前文档的 URLDocument对象 Do

11、cument 对象方法常用方法描述close()关闭用 document.open() 方法打开的输出流，并显示选定的数据。getElementById()返回对拥有指定 id 的第一个对象的引用。getElementsByName()返回带有指定名称的对象集合。getElementsByTagName()返回带有指定标签名的对象集合。open()打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。write()向文档写 HTML 表达式 或 JavaScript 代码。writeln()等同于 write() 方法，不同的是在每

12、个表达式之后写一个换行符。Document对象 HTML DOM节点树根节点根节点的子节点有什么办法对HTML中的内容进行动态改变呢？使用Document Object Model相邻节点function changeLink() document.getElementById(myAnchor).innerHTML=搜狐 ;document.getElementById(myAnchor).href= ; 淘宝修改内容修改属性HTML文档的每个节点都是对象，都具备属性、方法和事件定位链接元素（对象）通过 DOM，可访问 HTML 文档中的每个节点方法一、使用 getElementById()

13、和getElementsByTagName()方法 方法二、通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性 Document对象 比 较getElementById()getElementsByTagName()忽略文档的结构,查找整个 HTML 文档中的任何 HTML 元素 返回的值是一个节点nodedocument.getElementById(ID); 忽略文档的结构,查找整个 HTML 文档中的任何 HTML 元素返回的值是一个节点列表nodelistdocument.getElementsByTagName(标签名称); docum

14、ent.getElementById(ID).getElementsByTagName(标签名称);getElementById() 语法document.getElementById(ID); 举例第一段文字为黑色第二段文字为黑色第三段文字为黑色var x=document.getElementById(second);x.style.color=red; /让第二行p标记内的文字改变成红色例1：让所有中的文字变红色第一段文字为黑色第二段文字为黑色第三段文字为黑色var x=document.getElementsByTagName(p); for (var i=0;ix.length;i+

15、) xi.style.color=red; /让所有的p标记内的文字改变成红色 getElementsByTagName示例1例2：仅 中的标记中文变红色；而外的不变。div外的文字div外的文字第一段文字为黑色第二段文字为黑色第三段文字为黑色var x=document.getElementById(menu).getElementsByTagName(p); for (var i=0;ix.length;i+) xi.style.color=“red”; /让div中的p标记内文字改变成红色 getElementsByTagName示例2parentNode、firstChild以及las

16、tChild这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。 John Doe Alaska 第一个元素是元素的首个子元素firstChild最后一个元素是元素的最后一个子元素lastChild 是每个 元 素的父节点（parentNode）。节点列表（nodeList）对 firstChild 最普遍的用法是访问某个元素的文本：parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 maindiv 的节点：var x=document.getElementById(maindiv

17、);x.parentNode.removeChild(x);首先要找到带有指定 id 的节点，然后移至其父节点并执行 removeChild() 方法。节点列表（nodeList）节点举列修改表格最后一个单元格的文字颜色，删除第一个单元格1 2 3 4 var x=document.getElementById(tab1).getElementsByTagName(tr); /最后一单元格中的 4 变成红色 x0.lastChild.style.color=red; /删除第一个单元格var td1=x0.firstChild;td1.parentNode.removeChild( td1 )

18、;根节点访问根节点有两种特殊的文档属性可用来访问根节点：document.documentElement document.body 第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。第二个属性是对 HTML 页面的特殊扩展，提供了对 标签的直接访问。根节点访问下面这个例子向我们展示了当一个用户在文档中点击时，HTML 文档的背景颜色如何被改变。 function ChangeColor() document.body.bgColor=yellow ; Click on this document! 当前页面上有对象 var mainFrame=document.getElementById(“myFrame”); var subDocument=mainFrame.contentDocument | mainFrame.conte