`
vtyi
  • 浏览: 84368 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js document

阅读更多

<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 对象的用法大全

    ### JavaScript Document 对象详解 #### 一、Document 对象简介 在Web开发中,`document`对象是浏览器提供的一种能够操作HTML文档的方式。它属于浏览器的`window`对象的一个属性,可以通过`window.document`或者...

    javascript document对象详细介绍

    ### JavaScript Document对象详解 #### 一、概述 在Web开发中,`document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并且提供了访问和操作文档中的元素和内容的方法。通过`document`对象,...

    JS中关于document.all的详解

    ### JS中关于`document.all`的详解 #### 一、`document.all`简介 `document.all` 是一个只读属性,它返回一个包含文档中所有元素的类数组对象。这个特性最初是为 Internet Explorer 设计的,并且在早期版本的 IE 中...

    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方法汇总

    ### JavaScript的document方法汇总 在Web开发中,`document`对象是浏览器提供的核心对象之一,它代表当前加载的HTML文档,并提供了与文档交互的各种方法和属性。本文将详细介绍`document`对象的一些常用方法及其...

    js document对象详解

    JS 的 document 对象详解 作为 JavaScript 脚本语言中最重要的对象之一,document 对象提供了大量的属性和方法来操作和控制 HTML 文档。下面是对 document 对象的详细介绍。 document 对象属性 1. document.title...

    javascript里的document.all用法

    在JavaScript中,`document.all`属性是Internet Explorer的专有特性,它允许脚本访问文档中的所有元素。这个属性返回一个对象集合,包含了文档中所有的HTML标签,这为开发者提供了强大的DOM操作能力。 ### `...

    document属性和方法.txt

    ### Document属性和方法详解 #### 一、Document对象概述 `Document`对象是浏览器中一个非常重要的对象,它表示整个HTML文档。通过`Document`对象,开发者可以访问页面中的所有元素,实现对网页内容的动态操作。下面...

    js关于document和window对象

    JS 中的 document 对象和 window 对象 在 JavaScript 中,document 对象和 window 对象是两个非常重要的对象,它们都是 Window 对象的属性,用于描述当前显示的文档和浏览器窗口。 document 对象 document 对象是...

    js技术中document对象技术汇总

    ### JavaScript中的Document对象技术汇总 在JavaScript编程语言中,`Document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并提供了多种方法和属性来操作网页内容。通过`Document`对象,开发者...

    part2 JS Browser Document Event

    本文将深入探讨"Part2 JS Browser Document Event"这一主题,主要关注如何使用JavaScript与浏览器文档进行交互,以及如何处理用户触发的各种事件。 一、DOM:文档对象模型 DOM是HTML和XML文档的结构化表示,它允许...

    javascript document

    `JavaScript使用技巧精萃.doc`文档很可能是总结了JavaScript编程的一些实用技巧和最佳实践,其中包括如何高效地使用`document`对象进行DOM操作。例如,利用`document.querySelector()`和`document.querySelectorAll...

    JS document对象简单用法完整示例

    JavaScript中的`document`对象是浏览器提供的全局对象,用于访问和操作HTML文档的各个部分,包括元素、属性、事件等。本篇文章将详细讲解`document`对象的一些基础用法,包括直接和间接获取页面元素的方法。 1. **...

    JS_Document

    **JS_Document** 这篇文档主要聚焦于JavaScript中的`Document`对象,它是Web浏览器中的核心组件,属于DOM(Document Object Model)的一部分。DOM是HTML和XML文档的编程接口,允许我们通过JavaScript来操作页面上的...

    JS document文档的简单操作完整示例

    本文主要介绍了在JavaScript中操作Document文档对象时的基本方法和技巧。通过具体的示例代码,向读者展示了如何利用JavaScript对HTML文档进行增删改查等操作。具体的知识点如下: 1. 获取元素 在JavaScript中,获取...

    javascript-document对象详解(下).zip

    在这个“javascript-document对象详解(下)”的压缩包中,我们可以通过三个文件来深入理解这个核心概念。 首先,`29.document-fun.html`可能是一个包含实际代码示例的HTML文件,它展示了`document`对象在实践中的...

    document 对象.html-javascript中DOM对象内容

    document 对象.html-javascript中DOM对象内容

    JS document内容及样式操作完整示例

    JavaScript(简称JS)是一种广泛使用的网页脚本编程语言,它用于网页的动态内容制作、用户界面交互以及前后端的数据交互。在本文中,我们将详细介绍如何使用JavaScript中的document对象来操作网页中的元素内容和样式...

    js document.getElementsByClassName的使用介绍与自定义函数

    `js document.getElementsByClassName` 是HTML5引入的一个非常有用的DOM操作方法,允许开发者根据元素的类名(class)来选取页面上的元素集合。这个方法在IE8及以下版本的浏览器中不被支持,但在现代浏览器中已经...

Global site tag (gtag.js) - Google Analytics