`

javaScript DOM方法与属性摘要

 
阅读更多
createDocumentFragment()
创建一个文档片断(fragment)节点。在大量dom操作时,通过createDocumentFragment方式的效率较高
例:
var fragment = document.createDocumentFragment();//创建文档碎片

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

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

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);
注意:克隆节点 会存在浏览器兼容性问题(比如,文件域input克隆的副本,在ie中不会携带value属性值,但是在FF中会携带value属性值;select克隆的副本,ie中会选择第一个选项,但是在FF中会选择页面初始化时选择的那个选项)

appendChild()
reference = node.appendChild(newChild);
插入节点: 将newChild添加到node的childNodes的末尾
注意:appendChild()方法与insertBefore()方法都是剪切式操作DOM

insertBefore()                     注:父节点调用此方法
reference = element.insertBefore(newNode,targetNode)
将一个给定节点插入到一个给定元素节点的给定子节点的前面(即:把一个新节点插入到一个现有节点的前面,注:父节点调用此方法),返回一个指向新增子节点的引用指针。
例:
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

removeChild()                      注:父节点调用此方法
reference = element.removeChild(node)
将从一个给定元素删除一个子节点,返回一个指向已被删除的子节点的引用指针。
当某个节点被 removeChild()删除后,此节点所有子节点都被删除。
删除domObj可以这样实现:domObj.parentNode.removeChild(domObj);

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

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

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

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

getElementsByName()
document.getElementsByName("nameValue");
返回文档中的name属性值为nameValue的所有节点集合;

getElementsByTagName()
用于寻找有着给定标签名的所有元素:
elements = document.getElementsByTagName(tagName) ;返回此文档中所有标签名为tagName的节点集合。
elements = domObj.getElementsByTagName(tagName) ;返回指定节点的所有子节点中(递归)的标签名为tagName的节点集合。

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

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

nodeType属性将返回一个整数,这个数值代表给定节点的类型:1代表元素节点;2代表属性节点;3代表文本节点

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

childNodes 所有子节点的列表
firstChild 指向在childNodes列表中的第一个节点
lastChild 指向在childNodes列表中的最后一个节点
nextSibling 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null
previousSibling 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
parentNode 返回一个给定节点的父节点

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;   
     }
分享到:
评论

相关推荐

    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与网页内容进行交互。我们可以获取链接元素(`&lt;a&gt;`标签),然后修改其属性,如添加或改变文本、颜色、样式等,以此来突出显示链接特征。 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