Javascript Dom
3.1 文档:DOM中的D
概念:document 它把你编写的网页文档 转换为一个文档对象。
3.2 对象:DOM中的 O
概念:object
-
用户定义对象(user-defined object):自行创建的
-
内建对象(native object):内建在JavaScript语言里的对象,如 Array、Math和Date等
-
宿主对象(host object):由浏览器提供的对象
3.3 模型:DOM中的M
概念:Model map
3.4 节点:node
概念:表示网络中的一个连接点。 DOM,文档是由节点构成的集合
3.4.1 元素节点
元素标签 h p 等
3.4.2 文本节点
包含在元素标签的内部
3.4.3 属性节点
如 id或 class属性
3.4.4 获取元素
有三种 DOM 获取元素节点:ID、标签名字、类名
-
getElementById: 通过Id 返回该id元素节点 对应的 对象 document.getElementById(id); alert(typeof document .getElementById('id')) 返回一个类型
-
getElementsByTagName 通过标签 返回一个 对象数组 document.getElementsByTagName('tag'); alert(document.getElementsByTagName("li").length) 可以for循环遍历 for(var i = 0;i<document.getElementsByTagName("li").length;i++){ alert(typeof document.getElementsByTagName("li")[i]) } 可以 items = document.getElementsByTagName("li") 减少代码 //如果想知道id属性元素包含 多少 列表项,需具体对象调用 var shopping = document.getElementById("id"); var items = shopping.getElementsByTagName("li")
-
getElementSByClassName 通过Class 返回具有相同类名 的元素 的数组 多个类名用空格 隔开 document.getElementSByClassName("important sale".length) //可以自己写一个函数 实现getElementsByClassName
function getElementsByClassName(Node,Classname){ if(node.getElementsByClassName){ return node.getElementsByClassName(Classname) }else{ var results = new Array(); var elems = node.getElementsByTagName("*"); for(var i=0;i<elems.length;i++){ if(elems[i].ClassName.indexOf(classname)!=-1){ results[results.length]= elems[i]; } } return results; } }
3.4.5 知识点梳理
3.5 获取和设置属性
3.5.1 getAttribute
通过对象 调用 参数为 你想查询 属性的 名字
var paras = document.getElementsByTagName("p") alert(paras[i].getAttribute("title"))
3.5.2 setAttribute
对节点属性 做 修改 object.setAttribute(attribute,valu);
shopping.setAttribute("title","a list of goods")
四 图片库
当图片过多时 加载太慢 所以 创建图片库的浏览链接
4.1 标记
用序列清单元素来标记图片链接
占位符
:通过添加
<img id = "placeholder" src="images/placeholder.gif" alt="my image gallery"
4.2 JavaScript
为了把占位符 替换为想要查看的图片 需要改变 src属性。通过 setAttribute 参数为图片链接
whichpic 代表一个元素节点 具体点就是 指向某个图片的<a> function showPic (whichpic){ var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder") placeholder.setAttribute("src",source); }
4.2.1 非DOM解决方案
如想修改 某个 input 元素的 value 属性 element.value = "the new value" 等价于 element.setAttribute("value,the new value")
4.3 应用这个函数
-
把函数 保存在 .js 文件中
-
引用 js 文件 《script type = "text/javascript" src = "script/showPic.js"></script》
-
添加事件 处理函数 (javascript 内嵌时 用 双引号 包含 用 ;隔开) “onclick = "showPic(this) ;return false" this 表示这个 《a》元素节点 return false 防止跳转 下一个窗口