在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 Date对象 日期获取函数
Dec 19 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
javascript填充默认头像方法
Feb 22 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jquery自定义表格样式
2015/11/23 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
详解Python异常处理中的Finally else的功能
2017/12/29 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
python 高阶函数简单介绍
2021/02/19 Python
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
小学三八妇女节活动方案
2014/03/16 职场文书
公证委托书大全
2014/04/04 职场文书
幼儿园安全责任书
2014/04/14 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
语文教师求职信范文
2015/03/20 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
MySQL创建管理RANGE分区
2022/04/13 MySQL