javaScript DOM编程常用的方法与属性

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。


Node接口的特性和方法

特性/方法类型/放回类型说明
nodeName String 节点的名字;根据节点的类型而定义
nodeValueString 节点的值;根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点
childNodes NodeList 所有子节点的列表
previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null
hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真
attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点
appendChild(node) Node 将node添加到childNodes的末尾
removeChild(node) Node 从childNodes中删除node
replaceChild (newnode, oldnode)Node 将childNodes中的oldnode替换成newnode
insertBefore (newnode, refnode)Node 在childNodes中的refnode之前插入newnode


hasChildNodes() -- 查看是否存在子节点
该方法用来检查一个元素是否有子节点,返回值是 true 或 false.

var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.


replaceChild() -- 节点替换
把一个给定父元素里的一个子节点替换为另外一个子节点

var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中


getAttribute()   -- 查找属性节点
返回一个给定元素的一个给定属性节点的值

var attributeValue = element.getAttribute(attributeName);
给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回,如果给定属性不存在,getAttribute() 将返回一个空字符串.


setAttribute() -- 设置属性节点
将给定元素节点添加一个新的属性值或改变它的现有属性的值。

 element.setAttribute(attributeName,attributeValue);
属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在,它的值将被刷新;
如果不存在,setAttribute()方法将先创建它再为其赋值。


createElement() -- 创建新元素节点
按照给定的标签名创建一个新的元素节点。方法只有一个参数:将被创建的元素的名字,是一个字符串.

var reference = document.createElement(element);
方法的返回值:是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性,它只是一个存在于 JavaScript 上下文的对象.
var pElement = document.createElement("p");


createTextNode() -- 创建新文本节点
创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
  var textNode = document.createTextNode(text);
方法只有一个参数:新建文本节点所包含的文本字符串
方法的返回值:是一个指向新建节点的引用指针。它是一个文本节点,所以它的 nodeType 属性等于 3.
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性

var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);


appendChild() -- 插入节点(1)
为给定元素增加一个子节点:                                   
   var newreference = element.appendChild(newChild).              
   给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素

 var newliElement=document.createElement("li");var textNode=document.createTextNode("北京");newliElement.appendChild(textNode);document.body.appendChild(newliElement);var liElement=document.getElementsByTagName("li");var textValue=liElement[0].firstChild.nodeValue;alert(textValue);


insertBefore() -- 插入节点(2)
把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference =  element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用

<ul id="city">     <li value="beijing^" id="beijing">北京</li>        </ul>
<ul id="city01">   <li value="shanghai^" id="shanghai">上海</li>          </ul>//获取父节点var parentCityNode=document.getElementById("city");//获取子节点var beijingNode=document.getElementById("beijing");var shanghaiNode=document.getElementById("shanghai");//插入parentCityNode.insertBefore(shanghaiNode,beijingNode);


removeChild() -- 删除子节点
从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。

<ul id="city">  <li value="beijing^" id="beijing">北京</li> </ul>
var ulElement=document.getElementById("city");
var liElement=document.getElementById("beijing");
ulElement.removeChild(liElement);
如果想删除某个节点,但不知道它的父节点是哪一个,parentNode 属性可以帮忙。

<ul id="city">  <li value="beijing^" id="beijing">北京</li> </ul>
var liElement=document.getElementById("beijing");
var parentElement=liElement.parentNode;
parentElement.removeChild(liElement);


ChildNodes -- 遍历节点树

ChildNodes:返回一个数组,这个数组由给定元素节点的子节点构成:

var nodeList = node.childNodes;
文本节点和属性节点都不可能再包含任何子节点,所以它们的 ChildNodes 属性永远会返回一个空数组。
如果想知道某个元素有没有子节点,可以用 hasChildNodes 方法。
如果想知道某个元素有多少个子节点,可以用 childNodes 数组的 length 属性。
childNodes 属性是一个只读属性。


firstChild -- 获取第一个子节点

firstChild:该属性返回一个给定元素节点的第一个子节点,返回这个节点对象的指针。

var reference = node.firstChild;
文本节点和属性节点都不可能包含任何子节点,所以它们的 firstChild 属性永远会返回 null。
某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点,即:
var reference = node.ChildNodes[0];
firstChild 属性是一个只读属性。


lastChild:获取最后一个子节点。

nextSibling: 返回一个给定节点的下一个兄弟节点。

previousSibling:返回一个给定节点的上一个兄弟节点。

parentNode:返回一个给定节点的父节点。
parentNode 属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。



Document 对象的集合

集合描述
all[]提供对文档中所有 HTML 元素的访问。
anchors[]返回对文档中所有 Anchor 对象的引用。
applets返回对文档中所有 Applet 对象的引用。
forms[]返回对文档中所有 Form 对象引用。
images[]返回对文档中所有 Image 对象引用。
links[]返回对文档中所有 Area 和 Link 对象引用。

Document 对象的属性

属性描述
body提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。
cookie设置或返回与当前文档有关的所有 cookie。
domain返回当前文档的域名。
lastModified返回文档被最后修改的日期和时间。
referrer返回载入当前文档的文档的 URL。
title返回当前文档的标题。
URL返回当前文档的 URL。

Document 对象的方法

方法描述
close()关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById()返回对拥有指定 id 的第一个对象的引用。
getElementsByName()返回带有指定名称的对象集合。
getElementsByTagName()返回带有指定标签名的对象集合。
open()打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()向文档写 HTML 表达式 或 JavaScript 代码。
writeln()等同于 write() 方法,不同的是在每个表达式之后写一个换行符。



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/373825.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一:验证微信的Token

前言:申请到微信公众号的同学&#xff0c;可能会挺感兴趣的&#xff0c;毕竟微信公众号&#xff0c;确实是一个好东西&#xff0c;它提供了一个很好的平台&#xff0c;而且它自带有一套管理模板&#xff0c;对于微信公众号可以很好的管理。 但是也仅仅是很好的管理&#xff0c;…

三、 将DataTable 转换为List

1. 方法public static IList<T> ConvertTo<T>(DataTable table) { if (table null) { return null; } List<DataRow> rows new List<DataRow>(); foreach (DataRow row in table.Rows) { rows.Add(row); } return ConvertTo<T>(rows); }2. 调用…

ActiveMQ已准备好黄金时段

ActiveMQ项目始于2005年-在很大程度上&#xff0c;它一直是Apache Software Foundation的顶级项目。 ActiveMQ项目的目的一直是提供世界一流的企业消息传递解决方案&#xff0c;其中经纪人能够提供从支持IP的智能设备一直到企业后端的高可用性的连通性。 ActiveMQ提供跨语言客户…

r语言 adf检验_r语言中如何进行两组独立样本秩和检验

r语言中如何进行两组独立样本秩和检验​tecdat.cn安装所需的包wants <- c("coin") has <- wants %in% rownames(installed.packages()) if(any(!has)) install.packages(wants[!has])>一个样本测试set.seed(123) medH0 <- 30 DV <- sample(0:100, 20,…

MyEclipse 8.5安装Aptana

Aptana简介 Aptana是一个非常强大,开源,专注于JavaScript的Ajax开发IDE它的特性包括&#xff1a; 1、JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能 2、Outliner(大纲)&#xff1a;显示JavaScript,HTML和CSS的代码结构 3、支持 JavaScript&#xff0c…

2016-1-10 手势解锁demo的实现

一&#xff1a;实现自定义view&#xff0c;在.h,.m文件中代码如下: #import <UIKit/UIKit.h> class ZLLockView; protocol ZLLockViewDelegate <NSObject> - (void)lockView:(ZLLockView *)lockView didSelectedPwd: (NSString *)pwd; end interface ZLLockView : …

php与JAVA的RSA加密互通

Java 版本RSA 进行加密解密 在网上查询了好几天&#xff0c;最终找到解决方案&#xff0c;网络上都是通过Cipher.getInstance("RSA"); 而改成Cipher.getInstance("RSA/ECB/PKCS1Padding");就可以实现与php版本公钥和密钥互通了。 Cipher cipher Cipher.ge…

GWT入门

GWT是Google Web Development Kit的缩写&#xff0c;可让程序员使用Java开发Ajax Web应用程序。 GWT编译器将Java代码转换为JavaScript和html代码。 GWT应用程序称为模块&#xff0c;并且使用xml文件描述模块&#xff0c;假定该模块名称为xml文件的“ mymodule”名称为“ mymod…

JavaScript省市二级联动

XML文件负责保存所需要的数据&#xff0c;而HTML文件负责通过javascript解析XML数据并显示在页面上。代码如下&#xff1a; cities.xml <?xml version"1.0" encoding"GB2312"?> <china><province name"吉林省"><city>…

poj 3579 Median 二分套二分 或 二分加尺取

MedianTime Limit: 1000MS Memory Limit: 65536KTotal Submissions: 5118 Accepted: 1641Description Given N numbers, X1, X2, ... , XN, let us calculate the difference of every pair of numbers: ∣Xi - Xj∣ (1 ≤ i &#xff1c; j ≤ N). We can get C(N,2)differenc…

qt 嵌入web页面_Qt嵌入浏览器(三)——QWebEngine与Https

本篇简介&#xff1a;本篇的小目标&#xff1a;挑战通过Qt WebEngine实现与服务端的Https双向认证双向认证&#xff0c;Qt WebEngine和Chromium这里先说结论&#xff1a;挑战失败了。至少使用Qt WebEngine目前已实现的组件没有办法直接实现双向认证。先来简要分析一下实现双向认…

python模块;opencv安装

http://www.lfd.uci.edu/~gohlke/pythonlibs/ 1. 步骤1. 下载Python2.73, 安装, 并配置Python环境变量:".\Program Files\Python27;";注意: OpenCV仅支持2.6&2.7, Python不能使用3.x版本;2. 下载OpenCV2.46, 安装, 并配置OpenCV环境变量:".\Program Files\o…

Java中的正则表达式–软介绍

正则表达式是一种可以应用于文本&#xff08;Java中的String&#xff09;的模式。 Java提供了java.util.regex包&#xff0c;用于与正则表达式进行模式匹配。 Java正则表达式与Perl编程语言非常相似&#xff0c;并且非常易于学习。 正则表达式匹配文本&#xff08;或文本的一部…

AJAX入门——工作原理

理解同步交互和异步交互 举个例子&#xff1a;普通B/S模式(同步) AJAX技术(异步) * 同步&#xff1a; 提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事。 发送方发出数据后&#xff0c;等接收方发回响应以后才发下一个数据包的…

Couldn’t communicate with a helper application.

出现此问题 的情景 我在提交svn之前&#xff0c;在Xcode中的Images.xcassets里添加了文件夹后又删除了&#xff0c; 但是 在Xcode中提交的时候&#xff0c;左侧勾选文件那一栏中 出现了此文件夹及里边的文件。 解决&#xff1a; 我在conerstore中将此文件夹 remove后&#xff0…

python 复制文件夹内容 并结构一致_Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法...

本文实例讲述了Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法。分享给大家供大家参考。具体如下&#xff1a;这个东东本来是做来给公司数据同步用的&#xff1a;新服务器还没正式启用&#xff0c;旧的服务器还在使用&#xff0c;每天都有大量图片传到旧服务器上…

css控制页面文字不能被选中user-select:none;

现象&#xff1a;html中可能有些地方不想让用户复制文字&#xff0c;或是用a标签做了个点击按钮&#xff0c;点快的时候文字会被选中&#xff0c;很丑&#xff0c;这个时候可以使用下面的方案禁止文字选中。原因&#xff1a;鼠标点快了文字会被选中。解决方案&#xff1a;不同的…

form表单标签的enctype属性的作用

Enctype是指定将数据回发到服务器时浏览器使用的编码类型&#xff0c;其编码类型有以下三种 一、 application/x-www-form-urlencoded 这是通过表单发送数据时默认的编码类型。我们没有在from标签中设置enctype属性时默认就是application/x-www-form-urlencoded类型的。…

重温“ Java Sucks”

总览 关于Java的不足之处&#xff08;从C开发人员的角度来看&#xff09;的一个有趣的文档是在一段时间&#xff08;大约2000年前&#xff09;写的&#xff0c;但是今天许多论点都像十年前一样真实&#xff08;或不真实&#xff09;。 原始的Java Sucks发布。 短消息回顾 Ja…

Android Studio IDE Out of Memory

场景&#xff1a; 尝试过各种方式&#xff0c;IDE重装&#xff0c;重新启动&#xff0c;设置IDE MEMORY大小JDK MEMORY大小都无效 终于在FILE->INVALIDATE CACHES/RESTART 中点击重新启动之后问题攻克了。转载于:https://www.cnblogs.com/yxwkf/p/5128094.html