`
Andrew1945
  • 浏览: 13141 次
  • 性别: 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属性
i.节点的属性
(1)nodeName 属性将返回一个字符串,其内容是给定节点的名字。
如果节点是元素节点,返回这个元素的名称;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回一个内容为#text 的字符串;

(2)nodeType 属性将返回一个整数,这个数值代表给定节点的类型   1代表元素

(3)nodeValue 属性将返回给定节点的当前值
如果节点是元素节点,返回null;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回文本节点的内容;

ii.遍历节点树
(1)childNodes 该属性返回一个数组,这个数组由给定元素节点的子节点构成
(2)firstChild 返回第一个子节点
(3)lastChild 返回最后一个子节点
(4)nextSibling 返回给定节点的下一个子节点
(5)parentNode 返回一个给定节点的父节点
(6)previousSibling 返回给定节点的下一个子节点??

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



15. javascript DOM 遍历

以下一系列的辅助函数可以帮助您,他们能取代标准的previousSibling,nextSibling,firstChild,lastChild,parentNode;
 //------------------------DOM 遍历,如果元素没找到则返回null-----------------------//    
     //---查找相关元素的前一个兄弟元素---//    
     function prev(elem){    
         do{    
             elem=elem.previousSibling;    
         }while(elem&&elem.nodeType!=1);    
         return elem;    
    }    
    //---查找相关元素的下一个兄弟元素---//    
    function next(elem){    
        do{    
            elem=elem.nextSibling;    
        }while(elem&&elem.nodeType!=1);    
        return elem;    
    }    
    //---查找第一个子元素的函数---//    
    function first(elem){    
        elem=elem.firstChild;    
        return elem && elem.nodeType!=1 ?next(elem):elem;    
    }    
   //---查找最后一个子元素的函数---//    
    function last(elem){    
        elem=elem.lastChild;    
        return elem && elem.nodeType!=1 ?prev(elem):elem;    
    }    
    //---查找父级元素的函数---//    
    //num是父级元素的级次,parent(elem,2)等价于parent(parent(elem))    
    function parent(elem,num){    
        num=num||1;    
        for(var i=0; i<num; i++){    
            if(elem!=null){    
               elem=elem.parentNode;    
            }    
        }    
        return elem;    
    } 
分享到:
评论

相关推荐

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

    尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript及其与DOM操作相关的高级编程技巧。下面将基于这些信息,尽可能地扩展和阐述相关知识点。 ### 一、JavaScript简介 ...

    JavaScript DOM编程艺术 附录.pdf

    ### JavaScript DOM编程艺术:核心DOM方法与属性详解 在深入探讨《JavaScript DOM编程艺术》一书的精华内容之前,我们首先要理解DOM(Document Object Model,文档对象模型)的基础概念。DOM是一种标准,用于表示和...

    JavaScriptDOM编程艺术

    《JavaScript DOM编程艺术》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是HTML和XML文档的结构化表示,JavaScript通过DOM API能够对网页内容进行动态操作,实现丰富的交互效果。...

    HTML DOM 常用的属性和方法

    DOM节点类型有多种,其中最常见的是: 1. ElementNode.ELEMENT_NODE(1):表示HTML元素节点,如`&lt;p&gt;`、`&lt;div&gt;`等。 2. TextNode.TEXT_NODE(3):表示文本节点,存储元素内的文本内容。 3. DocumentNode.DOCUMENT_...

    javascript DOM 编程艺术源码

    5. **DOM操作**:创建新元素、插入和删除元素是DOM编程中常见的任务。`createElement()`, `appendChild()`, `removeChild()`, `insertBefore()`等方法用于构建和调整文档结构。 6. **CSS操作**:通过DOM可以动态...

    记录我的旅程之JavaScript Dom系列里面的所有例题

    在这个“记录我的旅程之JavaScript DOM系列”中,我们深入探讨了一系列与DOM相关的例题,这些例题旨在帮助开发者更好地理解和掌握DOM操作技巧。 首先,我们要了解DOM的基本概念。DOM是一个树形结构,它将网页内容...

    Javascript DOM编程艺术(中文版)

    在JavaScript中,有多种方法可以获取DOM元素: - **getElementById()**:通过ID获取元素。 - **getElementsByClassName()**:通过类名获取元素集合。 - **getElementsByTagName()**:通过标签名获取元素集合。 - **...

    javascript dom编程艺术 第2版 源码

    5. **DOM遍历**:遍历DOM树是常见的任务,例如`childNodes`、`children`属性和`firstChild`、`lastChild`、`previousSibling`、`nextSibling`等属性帮助我们访问和操作元素及其子元素。 6. **DOM创建与删除**:使用...

    JavaScriptDOM编程艺术.rar

    JavaScript DOM编程艺术是一本深入浅出的编程指南,专注于JavaScript语言与DOM(Document Object Model)的交互。DOM是HTML和XML文档的结构化表示,它允许我们通过编程方式访问和修改网页内容。这本书适合JavaScript...

    JavaScript DOM编程艺术 第2版+代码

    《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM作为Web页面的结构模型,是JavaScript进行页面动态操作的核心工具。这本书全面覆盖了利用JavaScript来...

    JavaScript DOM资料 网页制作完全手册

    JavaScript DOM(Document Object Model)是网页制作中的核心概念,它是一种标准,定义了怎样表示HTML或XML文档,并提供了与这些文档交互的接口。本资料集合是网页制作的完全手册,涵盖了JavaScript DOM以及相关的...

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

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

    JavaScript Dom编程艺术

    《JavaScript DOM编程艺术》是一本关于Web设计与JavaScript及文档对象模型(Document Object Model,简称DOM)相结合的专业书籍。本书由Jeremy Keith编写,通过深入浅出的方式向读者介绍了如何在网页设计中有效地...

    javascript dom 编程艺术

    《JavaScript DOM编程艺术》是一本深受前端开发者喜爱的经典著作,它深入浅出地讲解了JavaScript与DOM(Document Object Model)的交互技术,是web前端开发的重要思想精华。书中的内容涵盖了从基础到高级的DOM操作,...

    JavaScript DOM编程艺术

    《JavaScript DOM编程艺术》是一本深受JavaScript初学者喜爱的经典教程,它深入浅出地介绍了如何使用JavaScript语言操作和改变网页的结构、样式和内容。DOM(Document Object Model)是HTML和XML文档的结构化表示,...

    JavaScript中Dom操作实例详解.docx

    更多关于 JavaScript 相关内容感爱好的读者可查看本站专题:《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 大事相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、...

    javascript DOM笔记 1

    对于元素的属性操作,有三种常见的方法: 1. 直接通过点语法访问:`obj.style.display = "block"` 2. 通过数组访问方式:`obj.style["display"] = "block"` 3. 使用DOM方法:`getAttribute`、`setAttribute`和`...

    JavaScriptDOM编程艺术及源代码

    JavaScript DOM编程艺术是一本深入探讨JavaScript与DOM交互的权威指南,它涵盖了JavaScript在网页动态化、元素操作、事件处理以及Ajax通信等方面的核心技术。DOM(Document Object Model)是Web页面的一种结构化的...

Global site tag (gtag.js) - Google Analytics