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万用户提供服务.mhtjavaScript DOM方法和属性摘要-Javascript教程-技术资讯-华夏名网资讯...
本文将根据书中的内容摘要,重点解析DOM提供的核心方法及其应用场景。 #### 二、创建节点 **1. `createElement()` 方法** `createElement()` 是一种用于创建新元素节点的方法。它接受一个参数——新元素的标签名...
尽管jQuery本身没有专门针对DOM属性操作的方法,但我们可以通过jQuery的`each()`函数来遍历元素集合,并在回调函数中直接访问每个元素的DOM属性: ```javascript $("img").each(function(index){ alert("index:" +...
* Window对象:表示浏览器窗口,提供了很多有用的方法和属性。 * Document对象:表示HTML文档,提供了很多有用的方法和属性。 * DOM对象: Document Object Model,用于表示HTML文档的树形结构。 五、Javascript...
26. **框架与库**:介绍流行JavaScript框架(如jQuery、React等)的基本使用方法及优势。 27. **性能优化**:提供关于提升JavaScript运行效率的技巧和建议。 28. **安全性**:强调JavaScript安全性的必要性,并...
本资源摘要信息涵盖了JavaScript的基础知识点,包括变量、数据类型、运算符、控制结构、函数、数组、对象、事件处理、DOM操作等内容。 1. 变量和数据类型: - 变量的声明和赋值 - JavaScript中的数据类型:数值、...
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记...这份资源摘要信息涵盖了 JavaScript 基础知识点、DOM 和事件、高级函数、前端工程化、拓展课程等内容,为学习 JavaScript 提供了全面的知识点。
为了解决这一问题,本文提出了一种基于DOM和JavaScript的方法来创建网格样式表单。DOM是一种标准,用于表示HTML或XML文档的结构,并允许编程语言对其进行操作。JavaScript则因其特性,成为了实现DOM脚本的理想选择。...
通过DOM,JavaScript可以修改页面的内容、属性以及样式。 #### 3.2 常见方法 - **选择元素**:如`document.getElementById()`, `document.querySelector()`。 - **修改内容**:如`element.innerHTML`, `element....
在这个“列表收缩-JavaScript”的主题中,我们将探讨如何使用JavaScript实现这一功能,包括基础概念、实现方法和优化技巧。 1. **基础概念**: - **DOM操作**:在JavaScript中,我们通过Document Object Model ...
摘要有两种风格,一种不包含类型信息,适用于核心JavaScript参考,另一种包含类型信息,适用于W3C标准化的方法,如DOM操作。 6. **参数**:如果函数或方法有参数,这一部分会详细列出参数的描述和类型,帮助你准确...
1. **DOM操作**:DOM(Document Object Model)提供了访问和操作HTML文档的标准方法,掌握DOM是前端开发的基本技能之一。 2. **事件处理**:JavaScript可以通过监听各种事件(如click、mouseover等)来响应用户的...
#### 摘要与背景 本文主要探讨了SVG(可缩放矢量图形)文档的DOM(文档对象模型)编程接口,并提出了一种利用Jscript脚本技术和中间层“数据池”对SVG文档进行DOM解析的技术方案。随着网络技术的快速发展,网页设计...
本资源摘要信息提供了 JavaScript 编程笔试题的参考答案,涵盖了 JavaScript 基础知识、 DOM 操作、事件处理、表单处理等多方面的内容。通过学习这些问题和答案,可以帮助读者更好地理解 JavaScript 编程语言,提高...
然而,由于具体内容并未给出详细章节或摘要信息,我们将基于标题、描述以及JavaScript领域的常见核心概念来生成相关的知识点。下面将详细介绍JavaScript的一些核心知识点。 ### JavaScript基础知识 1. **语言特性*...
本资源摘要信息将详细介绍 JavaScript 在线 API 文档生成文献综述的知识点,涵盖 JavaScript 语言背景、脚本语言、JavaScript 语言特性、API 文档、API 文档生成技术、编译原理、基于 DOM 的 XML 文档解析技术等方面...
本资源摘要信息涵盖了 JavaScript 的基本知识点,包括数据类型、变量声明提升、函数声明提升、变量或函数声明、判断数据类型、异步编程、事件流、事件冒泡、事件捕获、如何清除一个定时器、如何添加一个 DOM 对象到 ...
1. DOM操作:JavaScript通过Document Object Model (DOM) API与网页内容进行交互。我们可以获取链接元素(`<a>`标签),然后修改其属性,如添加或改变文本、颜色、样式等,以此来突出显示链接特征。 2. 鼠标事件...
原型链是JavaScript继承的基础,通过`__proto__`属性或`Object.getPrototypeOf`方法访问。 在JavaScript Snippets中,可能包含了一些常见的DOM操作,如添加、删除和修改HTML元素。DOM(文档对象模型)是浏览器如何...
DHTML,全称为Dynamic HTML,是一种利用HTML、CSS(层叠样式表)和JavaScript技术来创建动态、交互性网页的方法。对于新手来说,理解和掌握DHTML是提升网页设计能力的关键步骤。下面将详细阐述这三个核心组成部分...