`
yufenfei
  • 浏览: 803081 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javaScript DOM方法与属性摘要

阅读更多

遍历XML文档的常用DOM方法:
getElementById(sIDValue) 返回文档中具体指定id属性的元素
getElementByTabName(sTagName) 返回当前元素中有指定标记名的子元素的数 组
hasChildNodes() 判断当前节点是否拥有子节点,有则返回true getAttribute(sAttrName) 返回指定属性的字符串值


操作XML文档的常用DOM属性:
childNodes 以Node[]的形式存放当前节点的子节点,如果没有子节点,则 返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点,如果没有子 节点,则为null
lastChild 以Node的形式返回当前节点的最后一个子节点,如果没有 这样的节点,则返回null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点, 如果没有这样的节点,则返回null
nodeName 节点的名字,Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点,如果没 有父亲节点,则为null
previoiusSibling 以Node的形式返回紧挨当前节点,位于它之前的 兄弟节点。如果没有这样的节点,则返回null

 

 

1 createElement(element)
创建一个指定标签名创建一个新的元素节点,返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
    document.body.appendChild(para);

2 createTextNode()
创建一个包含着给定文本的新文本节点,返回一个指向新建文本节点的引用指针:
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串
eg)
var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);

3 cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本,参数为true或者false,true表示同时复制该节点的子节点,false则不复制任何子节点。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);

4 appendChild()
reference = node.appendChild(newChild);
插入节点,例子参考前面。

5 insertBefore()
reference = element.insertBefore(newNode,targetNode)
将一个给定节点插入到一个给定元素节点的给定子节点的前面,返回一个指向新增子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

6 removeChild()
reference = element.removeChild(node)
将从一个给定元素利删除一个子节点,返回一个指向已被删除的子节点的引用指针。
当某个节点被removeChild()删除后,此节点所有子节点都被删除。

7 replaceChild()
reference = element.replaceChild(newChild,oldChild)
把一个给定父元素里的一个子节点替换为另外一个节点,oldChild节点必须是element元素的一个子节点,返回值是一个指向已被替换的那个
子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

8 setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

9 getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。

10 getElementById()
element = document.getElementById(ID)
寻找一个有着给定id属性值的元素,返回一个元素节点

11 getElementByTagName()
用于寻找有着给定标签名的所有元素:
elements = document.getElementsByTagName(tagName)
返回一个节点集合。

12 hasChildNodes
用来检查一个给定元素是否有子节点
booleanValue = element.hasChildNodes
返回true或false。

13 DOM属性
节点的属性
nodeName属性将返回一个字符串,其内容是给定节点的名字。
如果节点是元素节点,返回这个元素的名称;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回一个内容为#text的字符串;

nodeType属性将返回一个整数,这个数值代表给定节点的类型
nodeValue属性将返回给定节点的当前值
如果节点是元素节点,返回null;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回文本节点的内容;

遍历节点树
childNodes 该属性返回一个数组,这个数组由给定元素节点的子节点构成
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
nextSibling 返回给定节点的下一个子节点
parentNode 返回一个给定节点的父节点
previousSibling 返回给定节点的下一个子节点??

14 setTimeout
javaScript函数,能够让某个函数在经过一段预定的时间之后才开始执行,函数有两个参数,第一个参数是将要执行的那个函数的名字;
第二个参数是一个数值,以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数:
setTimeout("function",interval);

分享到:
评论

相关推荐

    javaScript DOM方法和属性摘要-Javascript教程-技术资讯-华夏名网资讯中心 虚拟主机,域名注册,双线虚拟主机,服务器租赁,为7万用户提供服务.mht

    javaScript DOM方法和属性摘要-Javascript教程-技术资讯-华夏名网资讯中心 虚拟主机,域名注册,双线虚拟主机,服务器租赁,为7万用户提供服务.mhtjavaScript DOM方法和属性摘要-Javascript教程-技术资讯-华夏名网资讯...

    JavaScript DOM编程艺术 附录

    本文将根据书中的内容摘要,重点解析DOM提供的核心方法及其应用场景。 #### 二、创建节点 **1. `createElement()` 方法** `createElement()` 是一种用于创建新元素节点的方法。它接受一个参数——新元素的标签名...

    使用jQuery操作元素的属性与样式

    尽管jQuery本身没有专门针对DOM属性操作的方法,但我们可以通过jQuery的`each()`函数来遍历元素集合,并在回调函数中直接访问每个元素的DOM属性: ```javascript $("img").each(function(index){ alert("index:" +...

    Javascript教程—>前端大神必经之路

    * Window对象:表示浏览器窗口,提供了很多有用的方法和属性。 * Document对象:表示HTML文档,提供了很多有用的方法和属性。 * DOM对象: Document Object Model,用于表示HTML文档的树形结构。 五、Javascript...

    javascript

    26. **框架与库**:介绍流行JavaScript框架(如jQuery、React等)的基本使用方法及优势。 27. **性能优化**:提供关于提升JavaScript运行效率的技巧和建议。 28. **安全性**:强调JavaScript安全性的必要性,并...

    JavaScript复习题.pdf

    本资源摘要信息涵盖了JavaScript的基础知识点,包括变量、数据类型、运算符、控制结构、函数、数组、对象、事件处理、DOM操作等内容。 1. 变量和数据类型: - 变量的声明和赋值 - JavaScript中的数据类型:数值、...

    JavaScript基础学习笔记

    JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记...这份资源摘要信息涵盖了 JavaScript 基础知识点、DOM 和事件、高级函数、前端工程化、拓展课程等内容,为学习 JavaScript 提供了全面的知识点。

    基于DOM的网格样式表单的设计与实现.pdf

    为了解决这一问题,本文提出了一种基于DOM和JavaScript的方法来创建网格样式表单。DOM是一种标准,用于表示HTML或XML文档的结构,并允许编程语言对其进行操作。JavaScript则因其特性,成为了实现DOM脚本的理想选择。...

    head first javascript 中文版

    通过DOM,JavaScript可以修改页面的内容、属性以及样式。 #### 3.2 常见方法 - **选择元素**:如`document.getElementById()`, `document.querySelector()`。 - **修改内容**:如`element.innerHTML`, `element....

    列表收缩-JavaScript

    在这个“列表收缩-JavaScript”的主题中,我们将探讨如何使用JavaScript实现这一功能,包括基础概念、实现方法和优化技巧。 1. **基础概念**: - **DOM操作**:在JavaScript中,我们通过Document Object Model ...

    javascript核心参考手册【附带大纲导航】

    摘要有两种风格,一种不包含类型信息,适用于核心JavaScript参考,另一种包含类型信息,适用于W3C标准化的方法,如DOM操作。 6. **参数**:如果函数或方法有参数,这一部分会详细列出参数的描述和类型,帮助你准确...

    JavaScript语言精粹.修订版---高清版.pdf

    1. **DOM操作**:DOM(Document Object Model)提供了访问和操作HTML文档的标准方法,掌握DOM是前端开发的基本技能之一。 2. **事件处理**:JavaScript可以通过监听各种事件(如click、mouseover等)来响应用户的...

    基于Jscript脚本技术的SVG文档的DOM解析

    #### 摘要与背景 本文主要探讨了SVG(可缩放矢量图形)文档的DOM(文档对象模型)编程接口,并提出了一种利用Jscript脚本技术和中间层“数据池”对SVG文档进行DOM解析的技术方案。随着网络技术的快速发展,网页设计...

    javascript笔试题[参考].pdf

    本资源摘要信息提供了 JavaScript 编程笔试题的参考答案,涵盖了 JavaScript 基础知识、 DOM 操作、事件处理、表单处理等多方面的内容。通过学习这些问题和答案,可以帮助读者更好地理解 JavaScript 编程语言,提高...

    JavaScript启示录PDF完整版

    然而,由于具体内容并未给出详细章节或摘要信息,我们将基于标题、描述以及JavaScript领域的常见核心概念来生成相关的知识点。下面将详细介绍JavaScript的一些核心知识点。 ### JavaScript基础知识 1. **语言特性*...

    JavaScript在线API文档生成文献综述.doc

    本资源摘要信息将详细介绍 JavaScript 在线 API 文档生成文献综述的知识点,涵盖 JavaScript 语言背景、脚本语言、JavaScript 语言特性、API 文档、API 文档生成技术、编译原理、基于 DOM 的 XML 文档解析技术等方面...

    JavaScript 50道面试题及答案.docx

    本资源摘要信息涵盖了 JavaScript 的基本知识点,包括数据类型、变量声明提升、函数声明提升、变量或函数声明、判断数据类型、异步编程、事件流、事件冒泡、事件捕获、如何清除一个定时器、如何添加一个 DOM 对象到 ...

    javascript经典特效---显示链接特征.rar

    1. DOM操作:JavaScript通过Document Object Model (DOM) API与网页内容进行交互。我们可以获取链接元素(`<a>`标签),然后修改其属性,如添加或改变文本、颜色、样式等,以此来突出显示链接特征。 2. 鼠标事件...

    javascript_snippets:一点点JavaScript编码练习和摘要

    原型链是JavaScript继承的基础,通过`__proto__`属性或`Object.getPrototypeOf`方法访问。 在JavaScript Snippets中,可能包含了一些常见的DOM操作,如添加、删除和修改HTML元素。DOM(文档对象模型)是浏览器如何...

    供新手学习DHTML(html、css、javascript),参考源码( 简单后台雏形)

    DHTML,全称为Dynamic HTML,是一种利用HTML、CSS(层叠样式表)和JavaScript技术来创建动态、交互性网页的方法。对于新手来说,理解和掌握DHTML是提升网页设计能力的关键步骤。下面将详细阐述这三个核心组成部分...

Global site tag (gtag.js) - Google Analytics