- 浏览: 127590 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
AlexBlume:
...
js中“使用”el表达式 -
xiaoyuer9953:
这两天正需要这个,很好!
json-lib-2.4-jdk15.jar 组装json字符串 -
liuyue513:
...
MyEclipse下debug调试 -
Fs_sky:
谢了,太厉害了!
Object... values的用法 -
ooo456mmm:
goood
MyEclipse下debug调试
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;
}
创建一个文档片断(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;
}
发表评论
-
My97日历控件 常用范例
2012-04-24 15:17 1207官方文档: http://www.mysuc.com/test ... -
js封装、构建对象
2012-04-10 16:27 2201一、通过闭包,执行匿名函数,返回一个对象 //例1 var ... -
js事件
2012-03-31 15:52 2299先说下js事件中几个重要的概念:事件对象、目标元素(事件源)、 ... -
frames["frameName"]用法bug?
2012-03-13 16:02 1250闲话少说,直接上代码 ... -
hasOwnProperty实现剔除数组中重复项
2012-03-02 16:41 2472hasOwnProperty是用来判断一个对象是否有你给出名称 ... -
js数组排序
2012-03-02 16:22 1454js的数组中有一个sort()方法,默认是按照ASCII字符顺 ... -
函数的参数arguments、当前上下文this、call apply
2010-09-16 13:52 1246函数的参数arguments js中 ... -
html中js代码的加载顺序
2010-09-02 12:31 3463搜索:非阻塞JavaScript 对于一个html页面,he ... -
js变量作用域
2010-08-19 08:41 1169JavaScript的函数是在局部 ... -
javascript中数据类型
2010-08-01 17:16 1911var str = "Hello, world&qu ... -
JavaScript条件表达式的布尔判断
2010-07-31 15:57 7747在JavaScript中,对于单独 ... -
setTimeout和setInterval的使用
2010-07-17 14:40 934window对象有两个主要的定时方法,分别是setTimeou ... -
更改地址栏前小图标、按下回车键事件、关闭窗口
2010-07-16 19:04 2559<!-- 地址栏前添加自 ... -
javascript中数组、对象
2010-06-11 15:34 1400javascript数组操作大全: ... -
正则表达式
2010-06-11 10:10 915var patten1 = /^\d+(\.\d{1,6})? ... -
不使用第三个变量完成两个整数的交换
2010-04-20 09:32 852public class Person { ... -
js点滴
2010-02-02 11:39 998onchange 事件会在域的内容改变时发生。支持该事件的HT ... -
javascript操作cookie 以及 html国际化
2010-02-02 11:36 1811下面是cookie操作的工具类: var CookieUtil ... -
js获得本周,本月,本季度的开始日期和结束日期 & 给定日期,获得是当年的第几周
2010-01-24 13:14 1361js获得本周,本月,本季度的开始日期和结束日期 <scr ...
相关推荐
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是提升网页设计能力的关键步骤。下面将详细阐述这三个核心组成部分...