Dom中的基本方法
getElementById 返回唯一对象
getElementsByTagName 返回对象数组 .length属性得出对象包含个数
getElementsByClassName 通过类名访问元素,返回一个对象数组,特别说明:参数中的类名顺序不会影响选择,当浏览器不止此这个属性的时候,可以通过下面的方法替代:
方法是否存在
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName('*');
for(var i=0; i
setAttribute(attr,attrvalue) 设置元素的属性;该方法的做出的修改,不会反映在文档本身的源代码中;这涉及到DOM的工作模式:
先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态类容
。总结:前面三个元方法都是通过document直接调用,后两个方法是通过前面三个方法
定位
到某元素,然后元素本身调用设置或者获取元素属性补充:document.querySelector深度查找,查找第一个满足条件的元素,如果没有,怎返回null, document.querySelectorAll也是深度搜索
javascript中事件处理函数工作机制
当给元素添加了事件处理函数时,一旦事件发生,相应的javascript代码就得到执行,并且返回一个值给时间处理函数,事件处理函数根据返回为false还是true,判断事件处理函数是否发生,若为false,则认为没有触发,否则事件已发生。
childNodes属性,elem.childNodes 获取任何一个元素的所有的子元素,包括节点元素,文本元素,属性元素等 .length属性获子元素的数量 window.onload当页面加载时候执行。
nodeType属性, elem.nodeType获得属性是一个数值,nodeType总攻有12种可取值,但是具有实用价值的只有三种:元素节点、属性节点、文本节点的nodeType的值分别为1,2,3;不同的值,可以让函数只对特定的类型节点进行处理。
nodeValue 要改变文本节点的值,需要使用nodeValue来获取节点的值。诸如想如下代码:使用
var elems = document.getElementById('#mttext')
获取的时元素数组,还需要elems[0].nodeValue
才能够获得最终的值。同时可以使用nodeValue来设置元素的值elems[0].nodeValue = 'i am a good boy';
why not
firstChild和lastChild获取首个和最后一个元素 上面的
elems[0].nodeValue
等价于elems.firstChild.nodeValue
javascript的平稳退化
function popUp(url){
window.open(url,'popup','width=320px,height=480px');
}
性能考虑
尽量少访问dom和尽量减少标记
1.document.getElementsByTagName('a')
的每次使用都会重新搜索整个dom文档,最好的方法就是使用赋值var links = document.getElementsByTagName('a')
2.过多的不必要的元素只会增加Dom树的规模,增加Dom树查找特定元素的时间
2.文件放置位置,位于中的脚本导致浏览器无法并行加载其他的文件(如图像活着文本),一般来说,根绝HTTP规范,浏览器从同一域名最多只能同时下载两个文件。把所有的
标签都放到文档的末尾,
标记之前,就可以让页面变的更快。
压缩脚本
图片库改进
预防性措施
HTML-DOM简要介绍
document.forms;
element.getAttribute('src') -> element.src;
whichpic.getAttribute8('href')->whichpic.href;
placeholder.setAttibute('src',source)->placeholer.src = source;
动态的创建标记
this is sss content