在javascript中对于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的结构
三、节点
根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
四、Node 层次
节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
五、节点及其类型
节点
* 由结构图中我们可以看到，整个文档就是一个文档节点。
* 而每一个HMTL标签都是一个元素节点。
* 标签中的文字则是文本节点。
* 标签的属性是属性节点。
* 一切都是节点……
节点树
节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……
六、查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
七、查找元素节点
getElementById()
寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.
var oElement = document.getElementById ( sID )
该方法只能用于 document 对象
function test(){
var usernameElement=document.getElementById(“tid");
//获取元素的值
alert("usernameElement.value: "+usernameElement.value)
//获取元素的类型
alert("usernameElement.type: "+usernameElement.type)
}
getElementsByName()
寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。
function test(){
var tnameArray=document.getElementsByName("tname");
alert(tnameArray.length);
for(var i=0;i
}
}
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
// alert(inputElements[i].value);
// }
// }
//处理select
// //获取select标签
// var selectElements=document.getElementsByTagName("select");
// //获取select下的子标签
// for(var j=0;j
// for(var i=0;i
// }
// }
var textareaElements=document.getElementsByTagName("textarea");
alert(textareaElements[0].value);
// //处理input// var inputElements=document.getElementsByTagName("input");// //输出input标签的长度// //alert(inputElements.length);// for(var i=0;i
复制代码 代码如下:
var inputElements=document.getElementsByTagName("input");
for(var i=0;iif (inputElements.type != 'submit') {
inputElements[i].onchange = function(){
alert(this.value)
};
}
var selectElements=document.getElementsByTagName("select");
for (var i = 0; i selectElements[i].onchange=function(){
alert(this.value);
}
}
var inputElements=document.getElementsByTagName("input"); for(var i=0;i
八、parentNode、firstChild以及lastChild
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段：
复制代码 代码如下:
John
Doe
Alaska
在上面的HTML代码中，第一个
是
元素的首个子元素（firstChild），而最后一个 是
元素的最后一个子元素（lastChild）。
此外，
是每个 元 素的父节点（parentNode）。
复制代码 代码如下:
var textareaElements=document.getElementsByTagName("textarea");
for (var i = 0; i textareaElements[i].onchange = function(){
alert(this.value);
};
}
var textareaElements=document.getElementsByTagName("textarea"); for (var i = 0; i
九、查看是否存在子节点
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;ialert(inputElements[i].hasChildNodes());
}
var selectElements=document.getElementsByTagName("select"); alert(selectElements[0].hasChildNodes())var inputElements=document.getElementsByTagName("input");for(var i=0;i
十、根节点
有两种特殊的文档属性可用来访问根节点：
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展，提供了对
标签的直接访问。
十一、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 是个只读属性
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
-
javascript怎么将值类型强制转为字符串
-
javascript中什么是位运算符
-
总结分享： 6 种JavaScript的打断点的方...
-
javascript怎么判断字符串是否是数字
-
在javascript中对于DOM的加强_基础知识
专题推荐
-
独孤九贱-php全栈开发教程全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息
- 最新文章
- 热门排行
上一篇： 实例详解PHP命名空间用法
推荐阅读
-
JavaScript中的document.referrer在各种浏览器测试结果_基础知识
-
在HTML中插入JavaScript代码的示例_基础知识
-
在浏览器中打开或关闭JavaScript的方法_基础知识
-
在javaScript中关于submit和button的区别介绍_基础知识
-
Javascript 在浏览器环境中 (三) DOM节点的访问
-
在浏览器中打开或关闭JavaScript的方法_基础知识
-
在JavaScript中操作时间之getMonth()方法的使用_基础知识
-
在javascript中关于节点内容加强_基础知识
-
在JavaScript中typeof的用途介绍_基础知识
-
解释&&和||在javascript中的另类用法_基础知识
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论