`
cljspn
  • 浏览: 46917 次
  • 性别: Icon_minigender_1
  • 来自: 长春
最近访客 更多访客>>
社区版块
存档分类
最新评论

DOM和JAVASCRIPT访问页面上的元素

    博客分类:
  • js
阅读更多

访问方法:

  1. getElementById():返回拥用传递给该方法的指定id的第一个对象的引用。
  2. getElementsByName():返回拥用传递该方法的指定name的对象集合。
  3. getElementsByTagName():返回拥用传递给该方法的指定tag名称的对象集合。

如果在页面上有一个表格,

功能描述:获得记录数:

//要把表头去掉。
function getReorderCount(){
  var reocrders = document.getElementsByTagName("tr");
  return reocrders.length -1;
}

也可以这样写:

 

var  table = document.getElementById("table1");
//这是表格的行数
table.rows.length;
//如查要获得数据的记录数要把表头给去掉。要减1.

表格有rows与cells属性。其特点与getElementByTagName一样

getElementByTagName是文档接口(Document interface)和元素接口(Element interface)的中的方法,所以不管是根文档对象还是所有的元素对象都含有方法getElementByTagName();

功能描述:获得表格的列数

function getColumnCount(){
   var reocrders = document.getElementsByTagName("tr");
    return reocrders.item(0).childNodes.length
}
功能描述:获得除表头表格中元素的数据
function getCellData(){
   reocrders = document.getElementsByTagName("tr");
   for(j=1;j<reocrders.length;j++){
       currentRow =  reocrders.item(j) ;
       cur_cells = currentRow.getElementsByTagName("td");   
       for(i=0;i<cur_cells.length;i++){
            alert(cur_cells.item(i).childNodes.item(0).data);
       }
   }
}
 其中一个td单元中的数据也是一个结点对象,即文字结点

分享到:
评论
1 楼 risezhang 2008-02-22  
IE里getElementsByName()是按ID拿的 - -

相关推荐

    html dom 底层 javascript

    JavaScript通过DOM能够操纵HTML页面元素,从而实现网页的动态变化。这种结合使得开发者可以响应用户事件,创建动态的网页效果,而无需重新加载整个页面。 #### 访问 DOM 的方式 要访问DOM,JavaScript主要通过以下...

    dom和javascript关系

    DOM提供了丰富的接口供JavaScript访问和改变网页内容,两者结合使得前端开发拥有了强大的动态性和交互性。了解并熟练掌握DOM和JavaScript的关系,是成为一个合格前端开发者的基础。通过学习和实践,开发者能够更有效...

    JavaScript获取HTML DOM节点元素的方法的总结

    以上方法为JavaScript操作DOM的基本方式,掌握它们能够帮助开发者灵活地访问和修改网页的各个部分。值得注意的是,不同的浏览器在实现DOM接口时可能存在差异,因此在进行跨浏览器开发时,应考虑使用像jQuery、...

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

    IEdom查看javascript工具

    1. **实时查看DOM结构**:工具允许开发者实时查看当前网页的DOM结构,便于理解页面元素间的层级关系和属性信息。 2. **元素选中与定位**:用户可以直接在浏览器中选择网页元素,工具会同步显示对应的DOM节点,方便...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    理解DOM树的结构以及如何通过JavaScript访问和操作节点至关重要。 3. **事件处理**:JavaScript可以响应用户的交互,如点击、鼠标移动等。了解如何绑定和处理事件是DOM编程中的关键技能。 4. **CSS操作**:通过DOM...

    javaScript-DOM编程艺术

    通过DOM,JavaScript可以访问和修改网页上的所有元素,如文本、图像、链接等。 在了解JavaScript语法的基础上,我们可以更深入地学习DOM编程。首先,JavaScript的基本语法包括语句、注释和变量的使用。语句是程序的...

    DOM Scripting.Web.Design.with.JavaScript.and.the.Document.Object.Model(JavaScript DOM编程艺术)

    1. **DOM基础**:理解DOM的基本概念,如节点类型(元素节点、属性节点、文本节点等)、DOM树结构,以及如何通过JavaScript访问和操作这些节点。 2. **遍历DOM**:学习如何遍历DOM树,查找特定的元素,如使用`...

    JavaScript_DOM编程艺术第二版(中文)

    在DOM部分,书中详细讲解了DOM模型的层次结构,如何通过JavaScript访问和修改HTML元素,以及如何利用DOM事件来响应用户交互。理解DOM节点、属性、事件和选择器是创建动态网页的关键,这使得开发者能够动态加载内容、...

    WEB中截屏某一个DOM

    它允许我们捕获页面上指定ID或具有特定属性的DOM元素,并将其转化为图像。这种技术广泛应用于用户交互、页面分享、自动化测试等多个场景。 首先,我们要理解DOM是HTML或XML文档的结构化表示,每个节点都可以被唯一...

    JavaScriptDOM编程艺术

    通过学习《JavaScript DOM编程艺术》,读者将掌握如何利用JavaScript与DOM进行高效的网页动态编程,实现丰富的用户界面和交互体验。这本书不仅涵盖了DOM的基本概念,还深入讲解了实践中的技巧和最佳实践,对于前端...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    通过DOM可以获取到页面上的元素,然后为其绑定事件处理函数,实现各种动态效果。 #### 3.2 动态加载内容 利用JavaScript可以动态地从服务器加载数据并更新DOM,从而实现无需刷新整个页面就能改变部分内容的功能。...

    javascriptDOM

    DOM是一个树形结构,将网页内容分解为独立的对象,这些对象可以被JavaScript或者其他脚本语言访问和操作。在JavaScript中,DOM主要用于创建、修改和操纵网页元素,从而实现动态网页效果。 在学习JavaScript DOM时,...

    javascript_DOM操作.rar

    首先,DOM是网页内容的树状表示,它将HTML或XML文档的每个部分都作为一个对象,这些对象可以被JavaScript访问和修改。JavaScript通过DOM提供的接口,可以查找、遍历、修改甚至创建新的元素,实现网页的动态效果。 1...

    JavaScriptDOM编程艺术第二版

    1. **DOM基础**:理解DOM是什么,它是如何工作的,以及如何通过JavaScript访问和遍历DOM树。 2. **元素操作**:学习选择、创建、添加、删除和修改HTML元素的方法。 3. **事件处理**:了解事件的基本概念,如何绑定和...

    javascript dom编程艺术 第2版 源码

    DOM允许我们查找、修改和添加页面上的元素。 3. **DOM元素操作**:JavaScript提供了许多方法来操作DOM元素,例如`getElementById()`、`getElementsByTagName()`、`getElementsByClassName()`等,用于查找特定的元素...

    JavaScript & DOM Enlightenment

    DOM Enlightenment可能涵盖了如何通过JavaScript访问和修改DOM节点,包括元素选择(如querySelector和querySelectorAll)、遍历DOM树、添加和删除元素、以及事件处理。此外,还可能涉及到性能优化技巧,如使用文档...

    javascript dom2 源码及pdf

    通过阅读和理解这份资料,开发者可以更好地掌握JavaScript DOM2的精髓,从而在网页开发中游刃有余,实现复杂的功能,如动态更新页面、响应式设计、富交互等。 总的来说,JavaScript DOM2是Web开发中的关键工具,它...

    记录我的旅程之JavaScript Dom系列里面的所有例题

    在JavaScript中,访问DOM元素有多种方法。例如,`getElementById`用于获取具有特定ID的元素,`getElementsByClassName`和`getElementsByTagName`则分别根据类名和标签名找到元素集合。此外,`querySelector`和`...

    javascript DOM 编程艺术源码

    2. **元素访问**:`document.getElementById()`、`getElementsByTagName()`和`getElementsByClassName()`等方法用于查找页面上的特定元素。学会这些方法能帮助你精确地定位到需要操作的元素。 3. **属性操作**:...

Global site tag (gtag.js) - Google Analytics