脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-dz̸JavaScript֮DOM,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
DOM(文档对象模型)
1、常见HTML节点
元素节点:
htML标签,主要属性有TagName和innerHtml(以文本的方式返回标签内(说明这个标签、节点中必须有内容)所有内容,不解析Html,但是设置的时候可以增加html标签,可以解析);
文本节点:纯文本
属性节点:id、style、tITle、classname … … 不能被遍历
2、寻找节点的方法
getElemwntById返回结果唯一
getelementsbytagname返回一个结果集,以数组的方式
拥有一个item()方法可以使用
li(item(0))和 li[0]作用相同
getElementsByName返回结果集
/*以上都是返回的元素节点*/
getAttribute()不支持使用className、Style、onclick属性中有兼容性
removeAtrribute()IE6及一下不支持
getElementsByClassName() html5新增
3、node节点属性
只操作当前节点,不操作节点内的内容。
nodeValue和innerHtml的区别?
innerHtml:操作的是节点里面的内容,不是节点本身,在设置值的时候可以解析Html标记
nodeValue:操作的是节点本身,对节点里面的内容无效,在设置值的时候不能解析Html标记
4、层次节点属性
childNodes子节点,返回值是一个结果集(节点列表)
FirstChild 第一个子节点
lastChild最后一个子节点
parentNode父节点
previousSibling 紧挨着的前一个兄弟节点
nextSibling 紧挨着的后一个兄弟节点
attributes 返回一个属性节点列表,遍历方式:从后到前 attributes[0]—表示最后一个属性,也可以通过attributes[‘atrrName’]=atrrValue 即 又一个属性为id=”box” 通过attributes[‘id’]就可以获得box。(location.seArch与解析?后的字符串方法中的一样)
5、忽略空白节点
除IE浏览器,在html中每一个折行都被当作一个空白文本节点,这会严重影响到我们遍历节点,所以要想获得遍历节点的更好浏览器兼容,所以我们要移除这些空白节点,如下:
window.onload = function(){ VAR box = document.getElementById("test"); var child = box.childNodes; alert(removeEmpy(child).length); } ; /*移除空白字符*/ function removeEmpy(node){ for(var i = 0;i < node.length;i++){ if(node[i].nodeTyPE === 3 && /^/s+$/.test(node[i].nodeValue)){ node[i].parentNode.removeChild(node[i]); } } return node; }
6.节点操作(经常会收到空白节点的影响)
创建新节点
write(“
标签
”) 创建新的节点可以解析HTML标记,但是会删除之前HTML中的内容。
createElement(tagName) 创建一个新的元素节点,当只调用这个方法的时候只是在内存中建立,在HTML中是不存在的,需要调用添加节点的方法,才能将这个节点添加到HTML中。
另外,createElement方法在IE浏览器中有兼容问题,ifram、input中的button、chexkBox、radio,在使用该方法时需要写完整的HTML,如下:
createElement(“”);
createTetxNode(text) 创建一个文本节点
节点操作
appendChild(newnode) 在应用标签的最后添加一个子节点
insertBefore(newnode,oldChildnode) 在已有子节点前添加一个节点
removeChild(node) 删除节点,如果删除成功则返回这个节点,这就表示当我们调用这个方法时,虽然HTML的DOM树种不存在该节点了,但是这个节点本身还是存在于内存中的,要想完全删除代码如下:
var r = decument.removeChild(node);
r=null;//完全销毁
replaceChild(newnode,oldnode) 用新节点替换指定节点
cloneNode() 复制节点,该节点有两个参数,true和false,当cloneNode(true)时表示连复制节点的内容一起复制,当当cloneNode(false)时只会复制节点而不会复制里面的内容。
7、节点类型(常见)
Node:判断所以节点类型的接口(IE不支持)
Document:文档节点
Element:元素节点
Text:文本节点类型,当同时在一个元素节点下创建连续两个文本节点时,这两个文本节点不会自动合并成一个节点,仍然保持两个节点状态。下面介绍文本节点常用方法:
normalize():合并节点,把两个相邻的节点合并成一个文本节点
String.splitText(num):将String字符的签num个字符分隔出来,形成两个新节点
inserData(0,’hello’):将hello添加到第0个位置前
replaceData(0,2,’new’):使用new将第0个到第2个的字符串替换掉
substringData(0,2):获取第0个到第2个字符
comment:注释节点
nodeName:#comment
nodeValue:注释内容
nodeType:8
Attr:属性节点
其他常用方法
scrollIntoView():特定元素(默认当前视口不可见的元素)设置成即刻可见
children:返回对象的子节点(但是会自动忽视空白节点)
contains:判定一个节点是否为指定节点的子节点 兼容性:firefox3.6以下,safari3.0以下以及其他更低版本浏览器不支持
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-dz̸JavaScript֮DOM全部内容,希望文章能够帮你解决javascript代码实例教程-dz̸JavaScript֮DOM所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。