JavaScript DOM 编程艺术学习笔记(一):静态标记
来源:互联网 发布:软件系统的特性 编辑:程序博客网 时间:2024/05/28 15:21
JavaScriptDOM编程艺术
学习笔记(一):静态标记
DOM
- DOM脚本程序设计:涵盖了使用任何一种支持DOM API的程序设计语言去处理任何一种标记文档的情况。
- DOM是程序设计语言和标记文档之间的接口,它将文档表示成一棵节点树,每个节点都对应文档中的一个元素,以供程序设计语言处理。
网页的三个层次
- 结构层:HTML/XHTML-搭建文档结构
- 表示层:CSS-设置文档呈现效果
- 行为层:JavaScript/DOM-实现文档行为
对象
- 用户定义对象
- 内建对象:JavaScript语言里面的对象,如Array、Math、Date等。
- 宿主对象:浏览器提供的对象,如Window、Document等。
节点
- 元素节点:DOM树的骨架,每一个HTML标签都是一个元素节点。
- 文本节点:元素节点里面包含的文本内容。
- 属性节点:元素节点的属性单独看成一种节点,如:id、class属性。
注:一份文档中,每一个节点都是一个对象
DOM访问
1. 元素节点:
element.getElementById("*id*") element.getElementByTagName("*tag_name*") element.getElementByClassName("*class_name*")
例1:document.getElementById(id), 在全文档搜索并返回ID值为id的元素;
例2:Jone.getElementByTagName(“chage”), 在Jone元素的子节点中,搜索元素title名字为”change”的元素,并返回一个数组。
2.属性节点:
element.getAttribute(attribute) element.setAttribute(attribute, value)
setAttribute函数中的attribute属性如果原element不存在,则首先创建该属性,再设置其中的值。
3. 文本节点:
node.nodeValue
注意:这里的node一定要是文本节点,它一般是一个元素几点的子节点。节点类型可以用node.nodeType来确定。元素节点值为1,属性节点值为2,文本节点值为3.
4. 子节点:
element.childNodes:返回全部子元素的数组node.firstChild = node.childNodes[0]node.lastChild = node.childNodes[node.childNoes.length - 1]
JavaScript设计原则
1. 平稳退化
考虑到浏览器不能加载JS的情况(如现阶段大多数的搜索引擎),用户仍能正常访问资源,只是损失了用户体验。
2. 渐进增强
从核心内容开始构建,然后逐渐加强内容。不应该用DOM技术或CSS来向网页上添加重要的内容。否则很难实现平稳退化。
例子:hijax
3. 结构与代码分离
标记文档中不要出现JS代码。使用class名,建立标记文档和JS脚本文件的桥梁,使JS和标记文档分离。
4. 兼容
考虑到不同版本的浏览器对JS的支持不同,使用DOM函数之前要进行对象检测。
5. 性能
DOM函数的本质是搜索。因此减少整个树的规模(减少标记),同时减少搜索次数(减少函数调用次数)会提升代码性能。
图片库代码实例
1.目标:
创建一个包含三个图片的图片库。
2. 文件路径:
.\images\Vigal.jpg(原图片); .\images\small_Vigal.jpg (缩略图)
.\images\Meng.jpg(原图片); .\images\small_Meng.jpg(缩略图)
.\images\Comic.jpg(原图片); .\images\small_Comic.jpg(缩略图)
.\images\grey.jpg(默认图片)
.\script\myjs.js(JS脚本)
.\css\mycss.css
.\image gallery.html(HTML文档)
3. 代码:
HTML文档:
<!DOCTYPE html><html> <head> <title>Image Gallery</title> <link rel="stylesheet" type = "text/css" href = "css/mycss.css" /> </head> <body> <h1>Snapshots</h1> <ul id = "imagegallery"> <li> <a href = "images/Vigal.jpg" title = "Vigal" onclick = "showPic(this); return false;"> <img src = "images/small_Vigal.jpg" alt = "Vigal" /> </a> </li> <li> <a href = "images/Comic.jpg" title = "Comic" > <img src = "images/small_Comic.jpg" alt = "Comic" /> </a> </li> <li> <a href = "images/Meng.jpg" title = "Meng" > <img src = "images/small_Meng.jpg" alt = "Meng" /> </a> </li> <img id = "Image" src = "images/gray.jpg" alt="gray" /> <p id = "description">Choose a image</p> <script src = "script/myjs.js"></script> </body></html>
JS脚本:
addLoadEvent(prepareGallery); //文档加载完自动调用function prepareGallery(){ if(!document.getElementById) return false; // 对象检测 if(!document.getElementsByTagName) return false; if(!document.getElementById("imagegallery")) return false; // 兼容,即使后期删除文件JS也不会出错 var gallery = document.getElementById("imagegallery"); var links = gallery.getElementsByTagName("a"); for(var idx = 0; idx < links.length; idx++){ links[idx].onclick = function() { return !showPic(this); // this是与onclick 方法相关联的元素 } }}function showPic(whichpic){ if(!document.getElementById("Image")) return false; var source = whichpic.getAttribute("href"); var img = document.getElementById("Image"); img.setAttribute("src", whichpic); if(document.getElementById("description")){ var text = whichpic.getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = text; } return true;}//函数加载函数funtion addLoadEvent(func){ var oldonload = window.onload(); if(typeof window.onload != "function"){ window.onload = func; }else{ window.onload = function{ oldonload(); func(); } }}
- JavaScript DOM 编程艺术学习笔记(一):静态标记
- JavaScript DOM编程艺术学习笔记(二):动态标记
- 《JavaScript DOM编程艺术》学习笔记<一>
- javascript dom编程艺术学习笔记之动态创建标记
- JavaScript DOM编程艺术 学习笔记(一)简史
- JavaScript DOM编程艺术 学习笔记(七)动态创建标记
- JavaScript DOM编程艺术 学习笔记(三)DOM
- 读《JavaScript DOM编程艺术》笔记一
- JavaScript DOM编程艺术 学习笔记(四)JavaScript 图片库
- javascript DOM 编程艺术 学习笔记
- javascript DOM 编程艺术 学习笔记
- 《javascript+dom 编程艺术 》学习笔记
- 《javascript Dom编程艺术》学习笔记
- 《JavaScript Dom编程艺术》学习笔记01
- 《javascript dom编程艺术》学习笔记
- 《javascript DOM 编程艺术》学习笔记(一)——JS的发展与基本概念
- javascript DOM编程艺术学习笔记(2)图片库例子:
- javascript DOM编程艺术学习笔记(4)缩略语列表:
- swift 定时器的使用
- hive1.2伪分布mysql数据库配置详解
- EJB到底是什么,真的那么神秘吗??
- 2015 多校联赛 ——HDU5402(模拟)
- iOS开发 画一条线
- JavaScript DOM 编程艺术学习笔记(一):静态标记
- Git中级用户的25个提示
- 最大和
- wpf 编辑XAML出现Exception from HRESULT: 0x80131515
- (C/C++学习笔记)函数模板的深入理解
- RabbitMQ
- 欢迎使用CSDN-markdown编辑器
- nyoj 586 疯牛(二分+贪心)
- php显示各种时间段