知识点内容讲解.ppt

《asp.net程序设计》 JavaScript基础 知识点内容引入 JavaScript动态修改Html元素CSS 知识点内容讲解 每个载入浏览器的HTML页面都会成为document对象。document对象代表一个浏览器窗口或者框架中显示的HTML文件。浏览器在加载HTML文档时，为每一个HTML文档创建响应的document对象。document对象是window对象的一个属性，引用它时可以省略window前缀。document拥有大量的属性和方法，结合了大量子对象，如图像对象、超链接对象和表单对象等。这些子对象可以控制HTML文档中的对应元素，可以通过JavaScript对HTML页面中的所有元素进行访问。 知识点内容讲解 通过document对象可以使用页面中的任何元素，也可以添加新元素、删除存在的元素。下面来看看document的属性，见下表 属性名 作用 document.title 文档标题 document.bgColor 页面背景颜色 document.fgColor 页面文本颜色 document.linkColor 未点击过的链接颜色 document.alinkColor 焦点在此链接时的颜色 document.vlinkColor 点击过的链接颜色 document.URL URL属性 document.fileCreatedDate 文件建立日期 docment.fileModifiedDate 文件修改日期 document.fileSize 文件大小 document.cookie cookie信息 document.charset 字符集信息 知识点内容讲解 在处理文档时，有几个函数和属性可以用来获取元素信息，最常用的函数如下： document.write() 动态的向页面写入内容 document.createElement(Tag) 创建一个html标签对象 document.getElement(ID) 获得指定ID值的对象 document.getElementByName(Name) 获得指定Name值得对象集合 document.open() 打开一个流用以收集输出 document.close() 关闭输出流 document.write() 向文档写HTML代码或者js代码 document.writeln() 等同于write，输出后加上换行 知识点内容讲解 举例如下 例二： 在Dreamweaver中新建一个页面为test.html,输入如下图的代码。 知识点内容讲解 在这个例子中，首先获取了id为main的div元素节点，然后将背景色改为红色，代码如下： var mainContent = document.getElementById(main); mainContent.style.backgroundColor=#ff0000; 接着获取所有P元素的节点，通过循环语句遍历，把字体改为2em的，代码如下： var paragraphs = document.getElementsByTagName(p); for(i=0;iparagraphs.length;i++) { paragraphs[i].style.fontSize=2em; } 知识点内容讲解 最后遍历body的所有直接子节点，通过对话框把每个元素节点的id值依次显示出来，代码如下： var elements= document.getElementsByTagName(body)[0].childNodes; for(i=0;ielements.length;i++) { if(elements[i].nodeType == 1 elements[i].id) alert(elements[i].id); } 谢 谢