<TR>
<TD class=labelCol><LABEL for=Title>Overdue Email:</LABEL></TD>
<TD class="dataCol col02">
<input type="text" id="wkfPar5" name="wkparBo.overdueEmailDuration" value="">
</TD>
</TR>
拿到Label中的值
function lostfocus() {
var index;
var inputCheckbox = document.getElementsByTagName("INPUT");
for (index=0;index<inputCheckbox.length;index++){
if(inputCheckbox[index].type=='text'){
if (isNaN(inputCheckbox[index].value)) {
alert(inputCheckbox[index].parentNode.nodeName);//得到TD
alert(inputCheckbox[index].parentNode.previousSibling.firstChild.nodeValue);
alert(inputCheckbox[index].parentNode.previousSibling.childNodes[0].nodeName);
alert(inputCheckbox[index].parentNode.previousSibling.childNodes[0].outerText);
alert(inputCheckbox[index].parentNode.previousSibling.childNodes[0].outerText+" is not a effective Digital!");
return false;
} else if (!maxLengthVaildate(inputCheckbox[index].value,4)) {
alert("The maxlength is 4!");
return false;
}
}
}
return true;
}
outerHTML 设置或获取对象及其内容的 HTML 形式。
outerText 设置或获取对象的文本
parentElement 获取对象层次中的父对象。
parentNode 获取文档层次中的父对象。
parentTextEdit 获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。
previousSibling 获取对此对象的上一个兄弟对象的引用
lastChild 获取该对象 childNodes 集合中最后一个子对象的引用。
nextSibling 获取对此对象的下一个兄弟对象的引用。
nodeName 获取特定结点类型的名称。
nodeType 获取所需结点的类型。
nodeValue 设置或获取结点的值。
firstChild 获取对象的 childNodes 集合的第一个子对象的引用。
all 返回对象所包含的元素集合的引用。
attributes 获取对象标签属性的集合。
behaviorUrns 返回标识附加到该元素行为的统一资源名称(URN)字符串的集合。
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
children 获取作为对象直接后代的 DHTML 对象的集合。
JavaScript中的Node相关内容介绍
Node往往被翻译为节点,在一个对象(可以简单的理解为是HTML页面中),一个属性name="aaa"
可以是一个节点,一个< div id="aaa">……< /div>
也可以是一个节点,在< body>……< /body>
中的,也是一个大大的节点。下面是一些有关Node的属性和方法,并没有包含部分不兼容IE和FF内容的讲解。
Node的属性介绍:
nodeType:显示节点的类型
nodeName:显示节点的名称
nodeValue:显示节点的值
attributes:获取一个属性节点
firstChild:表示某一节点的第一个节点
lastChild:表示某一节点的最后一个子节点
childNodes:表示所在节点的所有子节点
parentNode:表示所在节点的父节点
nextSibling:紧挨着当前节点的上一个节点
previousSibling:紧挨着当前节点的下一个节点
ownerDocument:(不知)
Node有各种各样的节点,我们先花一些时间认识他们,同时一并了解nodeType,nodeName和nodeValue属性:
名称:元素节点
nodeType:ELEMENT_NODE
nodeType值:1
nodeName:元素标记名
nodeValue:null
<
body
>
<
div
id
=
"
t
"
><
span
><
/
span><
/
div
>
<
/
body>
<script>
var d = document.getElementById("t");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//
显示 1 DIV null
<
/
script
>
名称:属性节点
nodeType:ATTRIBUTE_NODE
nodeType值:2
nodeName:属性名
nodeValue:属性值
<
body
>
<
div
id
=
"
t
"
name
=
"
aaa
"
><
span
><
/
span><
/
div
>
<
/
body>
<script>
var d = document.getElementById("t").getAttributeNode("name");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//
显示 2 name aaa
<
/
script
>
名称:文本节点
nodeType:TEXT_NODE
nodeType值:3
nodeName:#text
nodeValue:文本内容
<
body
>
<
div
id
=
"
t
"
>
bbb
<
/
div>
<
/
body
>
<
script
>
var
d
=
document
.
getElementById
(
"
t
"
)
.
firstChild
;
document
.
write
(
d
.
nodeType
)
;
document
.
write
(
d
.
nodeName
)
;
document
.
write
(
d
.
nodeValue
)
;
//显示 3 #text bbb
<
/
script>
名称:CDATA文本节点(XML中传递文本的格式)
nodeType:CDATA_SECTION_NODE
nodeType值:4
nodeName:#cdata-section
nodeValue:CDATA文本内容
(作者省略8个属性,需技术补充)
attributes属性,直接获取一个属性节点,注意这里要使用[],保持IE和FF的兼容性。
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
name
=
"
aaa
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
/
body>
<script>
var d = document.getElementById("t").attributes["name"];
document.write(d.name);
document.write(d.value);
//
显示 name aaa
<
/
script
>
firstChild和lastChild属性,表示某一节点的第一个和最后一个子节点:
<
body
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
/
body>
<script>
var d = document.getElementById("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
//
显示 aaa ccc
<
/
script
>
childNodes和parentNode属性,表示所在节点的所有子节点和所在节点的父节点,这里的childNodes注意是一个数组:
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
/
body>
<script>
var d = document.getElementById("t");
document.write(d.childNodes[1].innerHTML);
document.write(d.parentNode.getAttribute("name"));
//
显示 bbb ddd
<
/
script
>
nextSibling和previousSibling属性,分别表示在parentNode的childNodes[]数组中,紧挨着当前节点的上一个和下一个节点:
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
/
body>
<script>
var d = document.getElementById("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//
显示 ccc aaa
<
/
script
>
ownerDocument属性(不知如何使用)
Node的方法介绍:
hasChildNodes():判定一个节点是否有子节点
removeChild():去除一个节点
appendChild():添加一个节点
replaceChild():替换一个节点
insertBefore():指定节点位置插入一个节点
cloneNode():复制一个节点
normalize():(不知)
hasChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
div
id
=
"
m
"
><
/
div>
<
/
body
>
<
script
>
alert
(
document
.
getElementById
(
"
t
"
)
.
hasChildNodes
())
;
alert
(
document
.
getElementById
(
"
m
"
)
.
hasChildNodes
())
;
// 第一个true,第二个false
<
/
script>
removeChild()方法:去除一个节点
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
/
body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").removeChild(d);
//
<span>aaa<
/
span
>被去除
<
/
script>
appendChild()方法:添加一个节点,如果文档树中已经存在该节点,则将它删除,然后在新位置插入。
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
/
body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").appendChild(d);
//
<span>aaa<
/
span
>成了最后一个节点
<
/
script>
replaceChild()方法:从文档树中删除(并返回)指定的子节点,用另一个节点来替换它。
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
/
body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var oldd = document.getElementById("t").lastChild;
document.getElementById("t").replaceChild(newd,oldd);
//
最后一项成了 eee
<
/
script
>
insertBefore()方法:在指定节点的前面插入一个节点,如果已经存在,则删除原来的,然后在新位置插入
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
>
<
/
body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var where = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newd,where);
//
在最后一项的前面多了一项 eee
<
/
script
>
cloneNode()方法:复制一个节点,该方法有一个参数,true表示同时复制所有的子节点,false表示近复制当前节点
<
body
name
=
"
ddd
"
>
<
div
id
=
"
t
"
><
span
>
aaa
<
/
span><span>bbb<
/
span
><
span
>
ccc
<
/
span><
/
div
><
div
id
=
"
m
"
><
/
div>
<
/
body
>
<
script
>
var
what
=
document
.
getElementById
(
"
t
"
)
.
cloneNode
(
false
)
.
innerHTML
;
document
.
getElementById
(
"
m
"
)
.
innerHTML
=
what
;
// 增加了一个aaabbbccc
<
/
script>
分享到:
相关推荐
javascript document方法属性 web 开发必备
javascript document 对象 用法
some very good books about javascript,if u complete those books and can use some debug tools such as FireBug or chrome developer tool, then u will have a very good comprehension of javascript
JavaScript的document方法汇总
jsDocument
document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接(焦点在此链接上)的颜色 document.vlinkColor //已点击过的...
js document对象 window对象
关于js的document对象的详细说明 转载的呵呵
主要介绍了JS document文档的简单操作,结合完整实例形式详细分析了JavaScript document文档元素添加、删除、获取、创建等相关操作技巧与使用注意事项,需要的朋友可以参考下
javascript document good!
主要介绍了JS document对象简单用法,结合完整实例形式详细分析了JS document对象获取、输出、节点调用等相关操作技巧,需要的朋友可以参考下
javascript document tool
javascript的document对象
主要介绍了JS document内容及样式操作,结合完整实例形式分析了JavaScript document内容及样式的获取、修改、添加等相关操作技巧,需要的朋友可以参考下
document 对象.html-javascript中DOM对象内容
javascript-document对象详解(下).zip
JS中关于document.all的详解
NULL 博文链接:https://sun-apple.iteye.com/blog/1109914
解决使用js进行下拉列表关联时使用documnet.frames方法在非ie中无响应的方法
一个对XmlDocument的DocumentElement 以及其属性Attributes进行访问的类库函数。