`
wangyalei
  • 浏览: 53744 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Js操控Html Dom

    博客分类:
  • AJAX
 
阅读更多

1.引用单个节点,使用getElementById方法可以获取指定Id的元素对象。

<form name="loginForm" action="login.action">
  useName:<input id="username" name="username" value="wangyalei" />
  passWord:<input id="password" name="password"  type="password" value="wangyalei"/>
 <input type="submit" value="submit"/>
<form/>

2.引用节点集合,利用getElementsByTagName方法获取指定标签名称的集合。

var inputElements = document.getElementsByTagName("input");
var username = inputElements["username"].value;
var pwd = inputElements["password"].value;
var btnValue = inputElements[2].value;

3.创建元素节点,利用document对象的createElement方法创建元素节点

var div = document.createElement("div");

4.创建文本节点,利用document对象的createTextNode方法创建一个文本节点

var div = document.createTextNode("please Enter you login");

5.添加属性节点,利用elementNode.setAttribute方法添加一个节点的属性

div.setAttribute("title","warning Message!");
div.setAttribute("id","warningMsg");

6.利用Node接口的appendChild方法可以实现为一个节点添加子节点,把div节点添加到body节点上

document.getElementsByTagName("body")[0].appendChild(div);
// 添加文本节点
div.appendChild(textNode);

7.利用Node接口的nodeName属性获取节点的名称

document.getElementsByTagName("form")[0].nodeName;
// 利用Node接口的nodeType属性获取节点的类型
var elementType = div.noteType;// 1 元素节点
var attrType = div.getAttributeNode("id").nodeType;// 2 属性节点
var txtType = textNode.nodeType;// 3 文本节点
    function remove(){
     var table = document.getElementById('ta');
     for(var i = 0; i<=table.rows.length; i++){
      table.deleteRow(1);
       }
     }
    function jisuan(){
     
     var table = document.getElementById('ta');
     for(var i = 1; i<=table.rows.length; i++){
      var td = table.rows[i].cells
      alert(td[2].innerHTML);
      }
    }
分享到:
评论

相关推荐

    HTML DOM 参考手册

    HTML DOM(Document Object Model)是Web开发中的一个...通过深入学习DOM,开发者可以更加灵活地操控HTML页面,提高网页应用的用户体验和功能性。CHM文件是一种常见的帮助文档格式,便于用户离线查阅和搜索相关资料。

    dom教程 dom文档对象实例教程

    DOM教程是学习JavaScript与网页交互的重要途径,通过理解DOM,开发者能够有效地操作网页元素,实现动态效果和交互功能。 在"DOM中文手册"中,你将找到关于DOM的各种详细信息,包括其基本概念、节点类型、节点关系、...

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

    这本书深入浅出地介绍了如何利用JavaScript动态操控网页内容,提升用户体验,以及实现丰富的交互功能。 DOM(Document Object Model)是HTML和XML文档的一种标准表示方式,它将网页内容结构化为一个可编程的对象...

    W3SChool离线手册+jsdom+bom

    【标题】"W3School离线手册+jsdom+bom" 涵盖了Web开发中的基础和进阶知识,主要包括HTML、CSS和JavaScript的相关内容,同时提到了jsdom库以及浏览器对象模型(BOM)的概念。这个压缩包很可能是为开发者提供一个离线...

    dhtml和htmldom开发手册

    这两份CHM文件——"DHTML 手册.chm"和"htmldom.chm"——很可能分别提供了关于DHTML和HTML DOM的详细指南。CHM是Microsoft的帮助文件格式,包含索引、搜索功能,方便开发者查阅和学习。 对于Java Web开发者来说,...

    韩顺平javascript笔记(最全整理 dom编程 oop 基础语法)

    在韩顺平老师的笔记中,"JS 面向(基于)对象编程.doc"可能详细讲解了JavaScript中的类、构造函数、原型链、继承和封装等面向对象的高级主题;"dom编程.doc"则可能涵盖了常见的DOM操作方法、事件处理和性能优化策略...

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

    《JavaScript DOM编程艺术第二版高清(中文)》是一本深入探讨JavaScript、DOM(Document...通过阅读此书,读者将能够熟练掌握JavaScript编程技巧,利用DOM动态操控网页,并能有效地利用HTML5的新特性构建现代Web应用。

    JavaScript DOM 编程艺术

    这本书深入浅出地介绍了如何利用JavaScript操控DOM,实现动态网页的创建与更新。 首先,我们需要理解DOM是什么。DOM是W3C制定的一种标准,它定义了表示和访问HTML或XML文档的标准方法。通过DOM,我们可以将网页视为...

    JavaScript Dom编程艺术

    ### JavaScript DOM编程艺术 #### 一、概述 ...通过学习本书中的内容,开发者可以更好地理解DOM的工作原理,并掌握如何高效地使用JavaScript来操控DOM,最终打造出更加丰富、互动性强的Web应用。

    第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt

    总的来说,JavaScript的DOM对象为开发者提供了丰富的功能,使得能够动态地操控网页内容、跟踪用户行为、以及提供更加交互式的用户体验。理解和熟练运用这些对象是Web开发中不可或缺的技能。通过结合History、...

    javascript中的BOM与DOM、JS核心[收集].pdf

    总的来说,JavaScript的BOM和DOM提供了强大的能力,让开发者可以灵活地操控浏览器环境和网页内容。掌握它们,不仅可以制作出吸引人的网页,还能开发出功能丰富的Web应用程序。随着HTML5的普及,JavaScript的角色将...

    JavaScript 和 HTML DOM 参考手册

    JavaScript 和 HTML DOM 是Web开发中的两个关键组成部分,它们一起构成了网页动态交互的基础。...通过理解这些对象和它们的属性、方法,开发者可以有效地操控HTML元素,响应用户交互,实现复杂的网页功能。

    JavaScriptDOM编程艺术

    《JavaScript DOM编程艺术》是一本...通过阅读并实践书中的示例,你将能够熟练地用JavaScript操控网页,创造出丰富的交互体验。同时,尽管是全英文版,但只要具备一定的英语基础,就能无障碍地理解和学习其中的知识。

    JavaScript.DOM编程艺术 (中文版1-12全)

    DOM是Web页面的结构化表示,它允许我们通过JavaScript来操作HTML或XML文档的各种元素,实现动态网页的效果。这本书全面覆盖了使用JavaScript操纵DOM的各种技术,帮助开发者提升在网页交互和动态效果方面的技能。 ...

    HTML DOM (关于html的资料,挺全的,对新手很有帮助)

    10. **学习资源**:这份压缩包提供的资料涵盖了HTML的基础知识和DOM操作,对于新手来说,可以通过阅读和实践,逐步掌握创建和操控网页的基本技能。 总之,HTML DOM是Web开发中不可或缺的一部分,它连接了HTML结构与...

    DOM编程详解(含HTML部分)

    DOM编程详解(含HTML部分)涉及的是Web开发中的一种核心技术,它允许开发者通过JavaScript等脚本语言操作HTML和XML文档。DOM,全称为Document Object Model,是一种标准接口,无论浏览器、操作系统还是编程语言,都能...

Global site tag (gtag.js) - Google Analytics