javascript的DOM编程

访问HTML元素方式

→根据ID访问HTML元素。

→根据节点关系访问HTML元素。

常用的有

document.getElementById("idVal");

得到ID名字为idVal的节点。

document.getElementsByName("name");

返回的是name属性为name的标签集合

document.getElementsByTagName("input")

返回标所有的input标签的集合

----------------DOM的增删改查

增:

1.创建节点使用的是
document.createElement(Tag) 其中Tag必须是一个合法的HTML标签名字

    复制节点使用的是Node cloneNode(boolean deep) 当deep为true的时候表示复制当前节点的时候,也复制里面的全部内容 否则是复制她自己

2.添加节点
appendChild(Node newNode)添加为最后一个节点

            insertBefore(Node newNode, Node refNode)添加到refNode节点的前面

         
  replaceChild(Node newNode, Node oldNode)替换节点

删:

删除节点使用
removeChild(oldNode) 删除oldNode节点  参数可以使对象也可以是数字

改:

得到要修改的元素然后修改innerHTML或者其value。

查:

访问节点:使用document.getElementById("id");

          还可以使用节点之间的兄弟关系。

访问表单:使用document.getElementById(‘form‘).elements[0] 返回的是表单中的第一个元素。

          document.getElementById(‘form‘).elements[‘pass‘]
返回name为pass的表单元素。

访问列表框: document.getElementById(‘select‘).options[n] 选择列表中的第n个元素。

访问表格元素:document.getElementById(‘table‘).row[1].cells[2]
返回表格的第2行的第三格。

时间: 2024-10-15 22:07:32

javascript的DOM编程的相关文章

JavaScript之DOM编程

今天看了web 前端的一些知识,JavaScript的DOM编程笔记如下: 1. 节点及其类型: 1). 元素节点 2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的什么位置编写 js 代码? 0). 直接在 html 页面中书写代码. <button id="button" onclick="alert('hello world');">Click Me

javascript之dom编程(1):简单用法

一:基本案例 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> 当前时间: <span id="myspan">----</span><br/> <input

高性能Javascript(2) DOM编程

第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM APIs主要用于访问这些文档中的数据.尽管DOM是与语言无关的API,在浏览器中的接口却是以JavaScript实现的.客户端大多数脚本程序与文档打交道,DOM就成为JavaScript代码日常行为中重要的组成部分. 2.1 DOM Access and Modification  DOM访问和修改

(3)JavaScript 之 DOM编程

DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 一.查找元素(选择器) 1.直接查找 document.getElementById             根据ID获取一个标签 document.getElementsByN

高性能JavaScript(DOM编程)快速响应的用户界面

浏览器UI线程 用于执行JavaScript代码和更新界面的进程被称为 “浏览器UI线程” . UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到线程空闲,一旦空闲队列就被重新提取出来运行.这些任务要么是运行JavaScript代码,要么是执行UI更新,包括重绘和重排.浏览器每一次执行JavaScript代码或者响应用户事件,都可能会导致一个或多个任务加入队列. function handleClick(){ //创建div元素 var div = document.createEl

JavaScript的DOM编程--11--插入节点

插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,targetNode); 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点. 1 <!DOCTYPE html> 2 <html lang="en"

JavaScript的DOM编程--02--获取元素节点

如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度 3) .document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie

JavaScript的DOM编程--03--读写属性节点

读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitl

JavaScript的DOM编程--05--两个实验

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitled Document</title> 5 6 <script type="text/javascript"> 7 window.onload = function(){

JavaScript的DOM编程--04--获取文本节点

获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值 1 <html> 2 <he