在javascript中对于DOM的加强


Posted in Javascript onApril 11, 2013

一、DOM

DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.
D:文档 ? html 文档 或 xml 文档
O:对象 ? document 对象的属性和方法
M:模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点(node)的层次。
DOM 把一个文档表示为一棵家谱树(父,子,兄弟)
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

二、DOM的结构

在javascript中对于DOM的加强

在javascript中对于DOM的加强

在javascript中对于DOM的加强

 

三、节点

根据 DOM,HTML 文档中的每个成分都是一个节点。DOM 是这样规定的:
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

四、Node 层次

节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

 在javascript中对于DOM的加强

五、节点及其类型

节点
   *  由结构图中我们可以看到,整个文档就是一个文档节点。
   *  而每一个HMTL标签都是一个元素节点。
   *  标签中的文字则是文本节点。
   *  标签的属性是属性节点。
   *  一切都是节点……

节点树
     节点树的概念从图中一目了然,最上面的就是“树根”了。节点之间有父子关系,祖先与子孙关系,兄妹关系。这些关系从图中也很好看出来,直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……
在javascript中对于DOM的加强

六、查找并访问节点

你可通过若干种方法来查找您希望操作的元素:
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

七、查找元素节点

getElementById()
       寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null.
var oElement = document.getElementById ( sID )
     该方法只能用于 document 对象

<input type="text" value="国庆60周年" id="tid">
 function test(){
    var usernameElement=document.getElementById(“tid");
    //获取元素的值
    alert("usernameElement.value: "+usernameElement.value)
    //获取元素的类型
    alert("usernameElement.type: "+usernameElement.type)
}

getElementsByName()
寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

 <form name="form1">
        <input type="text" name="tname" value="国庆60年_1" /><br>
        <input type="text" name="tname" value="国庆60年_2" /><br>
        <input type="text" name="tname" value="国庆60年_3" /><br>
        <input type="button" name="ok" value="保存" id="ok"  onclick="test();">
 </form> 
function test(){
     var tnameArray=document.getElementsByName("tname");
     alert(tnameArray.length);
     for(var i=0;i<tnameArray.length;i++){
             window.alert(tnameArray[i].value);
      }
  }

 

<input type="text" name="username" value="国庆60年_1" /><br>
<input type="text" name="username" value="国庆60年_2" /><br>
<input type="text" name="username" value="国庆60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok"><br>
<script language="JavaScript"> 
//该方法返回是数组类型 
var usernameElements=document.getElementsByName("username");
for (var i = 0; i < usernameElements.length; i++) {
//获取元素的类型
//alert(usernameElements[i].type)
//获取元素value的值
//alert(usernameElements[i].value);
//采用函数直接量的方法
usernameElements[i].onchange = function(){
alert(this.value);
}
}
</script>
<input type="text" name="username" value="国庆60年_1" /><br> <input type="text" name="username" value="国庆60年_2" /><br> <input type="text" name="username" value="国庆60年_3" /><br> <input type="button" name="ok" value="保存" id="ok"><br><script language="JavaScript"> //该方法返回是数组类型 var usernameElements=document.getElementsByName("username"); for (var i = 0; i < usernameElements.length; i++) { //获取元素的类型 //alert(usernameElements[i].type) //获取元素value的值 //alert(usernameElements[i].value); //采用函数直接量的方法 usernameElements[i].onchange = function(){ alert(this.value); }} </script>

getElementsByTagName()
寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
   var elements = document.getElementsByTagName(tagName);
   var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
   var container =   document.getElementById(“sid”);
   var elements = container.getElementsByTagName(“p”);
   alert(elements .length);

// //处理input
// var inputElements=document.getElementsByTagName("input");
// //输出input标签的长度
// //alert(inputElements.length);
// for(var i=0;i<inputElements.length;i++){
// if(inputElements[i].type!='button'){//submit
// alert(inputElements[i].value);
// }
// }
//处理select
// //获取select标签
// var selectElements=document.getElementsByTagName("select");
// //获取select下的子标签
// for(var j=0;j<selectElements.length;j++){
// var optionElements=selectElements[j].getElementsByTagName("option");
// for(var i=0;i<optionElements.length;i++){
// alert(optionElements[i].value);
// }
// }

var textareaElements=document.getElementsByTagName("textarea");
alert(textareaElements[0].value);
// //处理input// var inputElements=document.getElementsByTagName("input");// //输出input标签的长度// //alert(inputElements.length);// for(var i=0;i<inputElements.length;i++){// if(inputElements[i].type!='button'){//submit// alert(inputElements[i].value);// }// }//处理select// //获取select标签// var selectElements=document.getElementsByTagName("select");// //获取select下的子标签// for(var j=0;j<selectElements.length;j++){// var optionElements=selectElements[j].getElementsByTagName("option");// for(var i=0;i<optionElements.length;i++){// alert(optionElements[i].value);// }// } var textareaElements=document.getElementsByTagName("textarea"); alert(textareaElements[0].value);
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
if (inputElements.type != 'submit') {
inputElements[i].onchange = function(){
alert(this.value)
};
}var selectElements=document.getElementsByTagName("select");
for (var i = 0; i < selectElements.length; i++) {
selectElements[i].onchange=function(){ 
alert(this.value);
}
}
var inputElements=document.getElementsByTagName("input"); for(var i=0;i<inputElements.length;i++){ if (inputElements.type != 'submit') { inputElements[i].onchange = function(){ alert(this.value) }; } var selectElements=document.getElementsByTagName("select"); for (var i = 0; i < selectElements.length; i++) { selectElements[i].onchange=function(){ alert(this.value); } }

八、parentNode、firstChild以及lastChild

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段:

<table> 
<tr>
<td>John</td> 
<td>Doe</td>
<td>Alaska</td> 
</tr>
</table>

在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。
此外,<tr> 是每个 <td>元 素的父节点(parentNode)。

var textareaElements=document.getElementsByTagName("textarea");
for (var i = 0; i < textareaElements.length; i++) {
textareaElements[i].onchange = function(){
alert(this.value);
};
}
var textareaElements=document.getElementsByTagName("textarea"); for (var i = 0; i < textareaElements.length; i++) { textareaElements[i].onchange = function(){ alert(this.value); }; }

九、查看是否存在子节点

hasChildNodes() 
该方法用来检查一个元素是否有子节点,返回值是 true 或 false.
  var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。

hasChildNodes()

var selectElements=document.getElementsByTagName("select");
alert(selectElements[0].hasChildNodes())
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
alert(inputElements[i].hasChildNodes());
}
var selectElements=document.getElementsByTagName("select"); alert(selectElements[0].hasChildNodes())var inputElements=document.getElementsByTagName("input");for(var i=0;i<inputElements.length;i++){ alert(inputElements[i].hasChildNodes());}

十、根节点

有两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。

十一、DOM节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)

nodeName 属性含有某个节点的名称。
var name = node.nodeName;
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 html 元素的标签名称永远是大写的

nodeValue(节点值)

nodeValue:返回给定节点的当前值(字符串)
 如果给定节点是一个属性节点,返回值是这个属性的值。
 如果给定节点是一个文本节点,返回值是这个文本节点的内容。
 如果给定节点是一个元素节点,返回值是 null
 nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,
    但可以为文本节点的 nodeValue 属性设置一个值。
   var li = document.getElementById(“li”);
   if(li.firstChild.nodeType == 3)
      li.firstChild.nodeValue = “国庆60年”;

nodeType(节点类型)

nodeType:返回一个整数,这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:
Node.ELEMENT_NODE    ---1    -- 元素节点
Node.ATTRIBUTE_NODE  ---2    -- 属性节点
Node.TEXT_NODE       ---3    -- 文本节点
nodeType 是个只读属性

Javascript 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 #Javascript
在javascript中关于节点内容加强
Apr 11 #Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 #Javascript
jQuery实用基础超详细介绍
Apr 11 #Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 #Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 #Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 #Javascript
You might like
php检测文件编码的方法示例
2014/04/25 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
python概率计算器实例分析
2015/03/25 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python 的AES加密与解密实现
2019/07/09 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
人力资源部经理的岗位职责
2014/03/04 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
党校党性分析材料
2014/12/19 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python