`
czpae86
  • 浏览: 720538 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

javaScript DOM方法与属性摘要

 
阅读更多

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 返回给定节点的上一个子节点

分享到:
评论

相关推荐

    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