`
devil13th
  • 浏览: 43418 次
  • 性别: 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 返回给定节点的下一个子节点??

14 setTimeout

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

分享到:
评论

相关推荐

    javaScript中DOM模型使用详解+XMLHttpRequest异步请求使用

    总结起来,JavaScript的DOM模型和XMLHttpRequest异步请求是构建交互式Web应用的核心技术。DOM提供了对HTML文档结构的编程访问,允许开发者动态地更新页面内容和样式;而XMLHttpRequest则使得数据可以在后台获取和...

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

    在DOM部分,书中详细讲解了DOM模型的层次结构,如何通过JavaScript访问和修改HTML元素,以及如何利用DOM事件来响应用户交互。理解DOM节点、属性、事件和选择器是创建动态网页的关键,这使得开发者能够动态加载内容、...

    JavaScript DOM编程艺术【第2版&高清】.pdf

    但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...

    JavaScript DOM编程艺术.pdf

    《JavaScript DOM编程艺术》是Jeremy Keith所著的一本关于JavaScript和DOM(文档对象模型)编程的经典图书,它不仅阐述了JavaScript和DOM的基本知识,还着重讲解了DOM编程技术背后的思路和原则。本书被赞誉为Web设计...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    根据提供的文件信息,我们可以推断出这是一本关于JavaScript DOM编程技术的书籍...通过深入学习本书中的内容,开发者可以更好地理解和掌握JavaScript与DOM的结合方式,提高Web开发的能力。希望上述内容能对你有所帮助。

    javascript中dom的基础概念.pdf

    JavaScript 中的 DOM(Document Object Model,文档对象模型)是 HTML 和 XML 文档的编程接口。它使得开发者可以使用 JavaScript 来动态地访问和操作文档的结构和内容。DOM 中的基础概念是开发者需要掌握的基本知识...

    Javascript文档对象模型(DOM

    ### JavaScript文档对象模型(DOM)详解 #### 一、引言 文档对象模型(Document Object Model,简称DOM),是W3C为了统一不同浏览器环境下的文档处理方式而制定的一套标准。这一标准的诞生,旨在解决早期浏览器混战...

    经典之作javascript dom编程艺术源码

    DOM(Document Object Model)是HTML和XML文档的标准表示,它将文档结构转化为一个可编程的树形模型,使得我们可以用JavaScript来动态修改、添加和删除页面内容。 在JavaScript中,DOM操作主要包括以下几个核心知识...

    Javascript+DOM编程艺术(完整版).pdf

    《Javascript+DOM编程艺术(完整版)》是Jeremy Keith所著的一本关于前端开发技术的书籍,专注于Web设计中的JavaScript和DOM编程。本书被认为是前端开发者必读的经典之作,其清晰的文笔、遵循优秀的编程原则和严格的...

    javaScript-DOM编程艺术

    JavaScript-DOM编程艺术是关于如何使用JavaScript操作网页文档对象模型(Document Object Model,简称DOM)的技术。DOM是一种标准,它提供了表示和操作HTML或XML文档的接口。通过DOM,JavaScript可以访问和修改网页...

    JavaScript+DOM编程艺术(PDF格式原版+源代码)

    《JavaScript+DOM编程艺术》是一本深受欢迎的IT图书,主要针对JavaScript和DOM(文档对象模型)的编程技术进行深入浅出的讲解。作者通过简洁明快的写作风格,使得复杂的Web前端开发概念变得通俗易懂,适合初学者及有...

    javascript Dom 模型

    这是一个FLV视屏文件,介绍了JavaScript中dom的知识以及相关应用。

    JavaScript & DOM Enlightenment

    JavaScript和DOM Enlightenment是关于Web开发中的核心技术的深入学习资源,主要涵盖了JavaScript编程语言以及文档对象模型(Document Object Model)的应用。这两个概念对于任何希望成为前端开发者的人来说都是至关...

    javascript dom删除表格

    javascript 用dom模型删除单元格 很简单的javascript

    JavaScript+DOM编程艺术(最新中文版)

    接着,书中会详细讲解DOM模型,包括节点的概念、节点类型、遍历DOM树的方法以及常见的DOM操作,如创建、删除、修改元素。DOM允许开发者通过JavaScript访问和修改HTML文档的每一个部分,例如,可以通过选取特定的DOM...

    JavaScript+DOM编程艺术

    这本书旨在为读者提供JavaScript语言基础以及DOM操作的核心技能,同时强调了在前端Web开发中至关重要的设计理念,如预留退路、循序渐进和以用户为中心。 首先,JavaScript是一种广泛应用于网页和网络应用的脚本语言...

    javascriptDom编程艺术+源码

    DOM是Web页面的结构模型,通过JavaScript与DOM的交互,开发者可以实现对网页内容的动态操作和控制。这本书深入浅出地讲解了如何使用JavaScript来操纵DOM,从而实现丰富的用户界面和动态效果。 书中首先介绍了...

Global site tag (gtag.js) - Google Analytics