在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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 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/07/15 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
教你php如何实现验证码
2016/01/20 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
一些常用的Javascript函数
2006/12/22 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
python实现折半查找和归并排序算法
2017/04/14 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python实现图片插入文字
2019/11/26 Python
pytorch的batch normalize使用详解
2020/01/15 Python
numpy库reshape用法详解
2020/04/19 Python
物理教育专业毕业生推荐信
2013/11/03 职场文书
行政助理的职责
2013/11/14 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
学生会主席任命书
2015/09/21 职场文书