`
yufenfei
  • 浏览: 797558 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javaScript DOM方法与属性摘要

阅读更多

遍历XML文档的常用DOM方法:
getElementById(sIDValue) 返回文档中具体指定id属性的元素
getElementByTabName(sTagName) 返回当前元素中有指定标记名的子元素的数 组
hasChildNodes() 判断当前节点是否拥有子节点,有则返回true getAttribute(sAttrName) 返回指定属性的字符串值


操作XML文档的常用DOM属性:
childNodes 以Node[]的形式存放当前节点的子节点,如果没有子节点,则 返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点,如果没有子 节点,则为null
lastChild 以Node的形式返回当前节点的最后一个子节点,如果没有 这样的节点,则返回null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点, 如果没有这样的节点,则返回null
nodeName 节点的名字,Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点,如果没 有父亲节点,则为null
previoiusSibling 以Node的形式返回紧挨当前节点,位于它之前的 兄弟节点。如果没有这样的节点,则返回null

 

 

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方法和属性摘要-Javascript教程-技术资讯-华夏名网资讯中心 虚拟主机,域名注册,双线虚拟主机,服务器租赁,为7万用户提供服务.mht

    javaScript DOM方法和属性摘要-Javascript教程-技术资讯-华夏名网资讯中心 虚拟主机,域名注册,双线虚拟主机,服务器租赁,为7万用户提供服务.mhtjavaScript DOM方法和属性摘要-Javascript教程-技术资讯-华夏名网资讯...

    drumkit-app-js-css

    目录关于该项目使用JavaScript * DOM操作*控件结构* HTML音频API * JavaScript CSS操作* addEventListener项目说明/摘要该项目的重点是要使每个琴键在按下时发出相应的鼓声。 它还使用CSS过渡和动画使项目对用户更具...

    hlf-dom-extensions:自定义用户界面

    HLF DOM扩展 __ __ ___/\ \ /\ \ / __\\ \ \___ \ \ \ /\ \_/_ \ \ __`\ \ \ \ \ \ __\ \ \ \ \ \ \ \ \ \ ...主要功能摘要: 基于悬停的“意图”,并防止冗余切换或DOM颠簸。 对一组触发器重复使用相同的技巧,以使DOM

    java web 视频、电子书、源码(李兴华老师出版)

    3.3、使用JavaScript操作DOM 3.4、开发实战讲解(基于Oracle数据库) 第4章 Tomcat服务器的安装及配置 4.1、Web容器简介 4.2、Tomcat简介 4.3、Tomcat服务器的下载及配置 4.3.1、Tomcat下载 4.3.2、Tomcat...

    李兴华 Java Web 开发实战经典_带源码_高清pdf 带书签 上

    3.3、使用JavaScript操作DOM 3.4、开发实战讲解(基于Oracle数据库) 第4章 Tomcat服务器的安装及配置 4.1、Web容器简介 4.2、Tomcat简介 4.3、Tomcat服务器的下载及配置 4.3.1、Tomcat下载 4.3.2、Tomcat...

    MLDN+李兴华+Java+Web开发实战经典.part3.rar )

    3.3、使用JavaScript操作DOM 3.4、开发实战讲解(基于Oracle数据库) 第4章 Tomcat服务器的安装及配置 4.1、Web容器简介 4.2、Tomcat简介 4.3、Tomcat服务器的下载及配置 4.3.1、Tomcat下载 4.3.2、Tomcat...

    李兴华 java_web开发实战经典 源码 完整版收集共享

    3.3、使用JavaScript操作DOM 3.4、开发实战讲解(基于Oracle数据库) 第4章 Tomcat服务器的安装及配置 4.1、Web容器简介 4.2、Tomcat简介 4.3、Tomcat服务器的下载及配置 4.3.1、Tomcat下载 4.3.2、Tomcat...

    李兴华 Java Web 开发实战经典_带源码_高清pdf 带书签 下

    3.3、使用JavaScript操作DOM 3.4、开发实战讲解(基于Oracle数据库) 第4章 Tomcat服务器的安装及配置 4.1、Web容器简介 4.2、Tomcat简介 4.3、Tomcat服务器的下载及配置 4.3.1、Tomcat下载 4.3.2、Tomcat...

    李兴华Java Web开发实战经典.pdf (高清版) Part1

    3.3、使用JavaScript操作DOM 3.4、开发实战讲解(基于Oracle数据库) 第4章 Tomcat服务器的安装及配置 4.1、Web容器简介 4.2、Tomcat简介 4.3、Tomcat服务器的下载及配置 4.3.1、Tomcat下载 4.3.2、Tomcat...

    李兴华 Java Web 开发实战经典 高清扫描版Part3

    3.3、使用JavaScript操作DOM 3.4、开发实战讲解(基于Oracle数据库) 第4章 Tomcat服务器的安装及配置 4.1、Web容器简介 4.2、Tomcat简介 4.3、Tomcat服务器的下载及配置 4.3.1、Tomcat下载 4.3.2、Tomcat...

    李兴华Java Web开发实战经典(高清版) Part2

    3.3、使用JavaScript操作DOM 3.4、开发实战讲解(基于Oracle数据库) 第4章 Tomcat服务器的安装及配置 4.1、Web容器简介 4.2、Tomcat简介 4.3、Tomcat服务器的下载及配置 4.3.1、Tomcat下载 4.3.2、Tomcat...

    精通AngularJS part1

    构造级与实例级方法97 $resource创建异步方法100 $resource服务的限制101 使用$http自定义REST适配器101 35使用$http的高级特性104 截取响应104 36测试与$http交互的代码106 37小结108 第4章显示与格式化...

    JSer开源脚本框架 v2.2

     使用JSer,将极大的简化您的javascript开发,而且几乎不用考虑各浏览器的兼容问题,您可以便捷的使用DOM操作、CSS样式访问、属性读写、事件绑定、行为切换、动态载入、数据缓存、Cookies操作、URL与AJAX等众多功能...

    从零开始学习JQuery

    比如"在页面中编写加载时即执行的操作DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就...

    知乎大神萧井陌web前端课程

    第6章 网页中引入JavaScript代码、DOM、事件 第7章 数据类型、多行字符串和转义符号、高阶函数、匿名函数 第8章 事件委托、时间操作、标签的可编辑属性、(本地存储) 和 JSON 格式 第9章 作业选讲、抽象化, 如何封装...

    从零开始学习jQuery (二) 万能的选择器

    编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如”拥有title属性并且值中包含test的元素”, 完成这些工作只需要编写一个jQuery选择器...

    mantisbt-ui-enhanced:MantisBT 的 UI 可用性增强

    更轻松的 DOM 操作:任何 MantisBT 页面的 DOM 中的“匿名”元素(没有 id 属性)都使用通用 id 进行了增强。 兼容性 该主题是使用 Mantis 1.2.17 版创建和测试的 安装 确保已安装 MantisBT 的

    PHP和MySQL WEB开发(第4版)

    19.5 与环境变量交互:getenv()和putenv() 19.6 进一步学习 19.7 下一章 第20章 使用网络函数和协议函数 20.1 了解可供使用的协议 20.2 发送和读取电子邮件 20.3 使用其他Web站点的数据 20.4 使用网络查找函数 20.5...

    PHP和MySQL Web开发第4版pdf以及源码

    第2章 数据的存储与检索 2.1 保存数据以便后期使用 2.2 存储和检索Bob的订单 2.3 文件处理 2.4 打开文件 2.4.1 选择文件模式 2.4.2 使用fopen()打开文件 2.4.3 通过FTP或HTTP打开文件 2.4.4 解决打开文件时...

    PHP和MySQL Web开发第4版

    第2章 数据的存储与检索 2.1 保存数据以便后期使用 2.2 存储和检索Bob的订单 2.3 文件处理 2.4 打开文件 2.4.1 选择文件模式 2.4.2 使用fopen()打开文件 2.4.3 通过FTP或HTTP打开文件 2.4.4 解决打开文件时...

Global site tag (gtag.js) - Google Analytics