js DOM模型操作
发布时间:2024-05-13 09:37:18
DOM模型中的节点:元素节点、文本节点、属性节点
例:<a href=”http://www.cnblogs.com/shuz”>私のdotnet小屋</a>
(1)a是元素节点
(2)“私のdotnet小屋”是文本节点
(3)href=”http://www.cnblogs.com/shuz”是属性节点
DOM节点的属性
属性 | 类型 | 说明 |
nodeName | String | 节点名称,根据节点的类型而定义 |
nodeValue | String | 节点的值,根据节点的类型而定义 |
nodeType | Number | 节点类型,1为元素节点,2为属性节点,3为文本节点 |
firstChild | Node | 指向childNodes列表的第一个节点 |
lastChild | Node | 指向childNodes列表的最后一个节点 |
childNodes | NodeList | 所有子节点列表,childNodes[i]可以访问第i+1个节点 |
parentNode | Node | 指向节点的父节点,如果已是根节点,则返回null |
previousSibling | Node | 指向前一个兄弟节点,如果已是第一个节点,则返回null |
nextSibling | Node | 指向后一个兄弟节点,如果已是最后一个节点,返回null |
Attributes | NameNodeMap | 包含一个元素特性的Attr对象,仅用于元素节点 |
className | String | 节点的CSS类 |
innerHTML | String | 某个标记之间的所有内容,包括代码本身 |
DOM节点的方法
(1)访问节点:
【通过标签名】
document.getElementsByTagName(sTagName)方法:返回一个包含某个相同标签名的元素节点列表
【通过标签ID】
document.getElementById(sElementId)方法:返回Id为指定值的元素节点
【访问前一个节点】兼容IE和FireFox
(自定义)
function prevSib(oNode){
var oTempFirstNode=oNode.parentNode.firstChild;
//判断是否是第一个节点,如果是则返回null
if(oNode==oTempFirstNode)
return null;
var oTempNode=oNode.previousSibling;
//逐一搜索前面的兄弟节点,直到发现元素节点为止
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling;
//三目运算符,如果是元素节点则返回节点本身,否则返回null
return (oTempNode.nodeType==1)?:oTempNode:null;
}
【访问后一个节点】兼容IE和FireFox
(自定义)
function nextSib(oNode){
var oTempLastNode=oNode.parentNode.lastChild;
//判断是否是最后一个节点,如果是则返回null
if(oNode==oTempLastNode)
return null;
var oTempNode=oNode.nextSibling;
//逐一搜索后面的兄弟节点,直到发现元素节点为止
while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null)
oTempNode=oTempNode.nextSibling;
//三目运算符,如果是元素节点则返回节点本身,否则返回null
return(oTempNode.nodeType==1)?oTempNode:null;
}
(2)判断一个节点是否有子节点:
NodeObject.hasChildNodes()方法:当childNodes包含一个或多个节点时,返回true
(3)设置节点属性:
eleNode.getAttribute(attrNode)方法:返回eleNode元素的attrNode属性
eleNode.setAttribute(attrNode,sNewValue)方法:设置eleNode元素的attrNode属性的值为sNewValue
(4)创建节点:
document.createElement(eleNode)方法:创建一个元素节点eleNode
document.createTextNode(textNode)方法:创建一个文本节点textNode
document.createDocumentFragment()方法:创建文档碎片节点
(5)添加节点:
eleNode.appendChild(textNode)方法:将textNode节点添加到childNodes的末尾
(6)删除节点:
oNode.parentNode.removeChild(oNode)方法:从childNodes中删除oNode节点
(7)替换节点:
oNode.parentNode.replaceChild(oNewNode,oOldNode)方法:将childNodes中的oOldNode节点替换成oNewNode节点
(8)在特定节点前插入节点:
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode节点之前插入oNewNode节点
(9)在特定节点后插入节点:
(自定义)oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode节点之后插入oNewNode节点
function insertAfter(oNewNode,oTargetNode){
var oParentNode=oTargetNode.parentNode;
if(oParentNode.lastChild==oTargetNode)
oParentNode.appendChild(oNewNode);
else
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling);
}


猜你喜欢
- >>> "hello".encode("hex") '68656c6c6f
- mysql 下载安装配置 5.7.20 / 5.7.21,供大家参考,具体内容如下1、下载mysql,下载地址选择操作系统和版本,我是64位
- 在安装某个包的时候出现如下错误然后按照提示运行python -m pip install --upgrade pip并更新pip后再次运行p
- 使用MySQL Administrator 登录,报错: Either the server service or the configur
- 简介在各个语言之中都有时间类型的处理,因为这个地球是圆的(我仿佛在讲废话),有多个时区,每个时区的时间不一样,在程序中有必要存在一种方式,或
- 本文以sql2012为例第一步,(查询日志中文件名和大小):USE 数据库名GOSELECT file_id, name,size,* FR
- 诊断SQLSERVER问题常用的日志这里主要有两个:(1)Windows事件日志(2)SQLSERVER ErrorLog1、Windows
- 深入解析Linux下MySQL数据库的备份与还原 1. 备份 [root@localhost ~]# cd /var/lib/mysql (
- 本文实例讲述了JavaScript观察者模式原理与用法。分享给大家供大家参考,具体如下:观察者模式观察者模式又叫发布订阅模式(Publish
- 首先下载selenium模块,pip install selenium,下载一个浏览器驱动程序(我这里使用谷歌)。#导入#注意python各
- 使用爬虫时遇到etree红线问题1.首先解释一下该问题的原因是Pycharm的解释器与所要求的解释器不匹配:解决方法很简单:将软件Pycha
- 【写在前面】这真的是太那个什么了不管怎么说 做过的东西做个笔记总是好的花一点点时间做笔记不然如果哪一天要重新做了 或者哪一天要汇报工作 都不
- 代码:function checkall(checkNames){ var allBoxs = document.getElem
- 前言无论什么时候,SQL Server 的安装和卸载都是一件让我们头疼的事情。因为不管是 SQL Server 还是 MySQL 的数据库,
- python 里有一个 threading 模块,其中提供了一个函数:threading.Thread(target=function, a
- Python字典的key都可以是什么答一个对象能不能作为字典的key,就取决于其有没有__hash__方法。所以所有python自带类型中,
- 引言“ 这是MySQL系列笔记的第五篇,文章内容均为本人通过实践及查阅资料相关整理所得,可用作新手入门指南,或
- WebDriver内置了测试中捕获屏幕并保存的方法。示例脚本:(1)save_screenshot(filename):保存屏幕截图from
- 说明1、方差检验是用来比较两个或多个变量数据的样本,以确定它们之间的差异是简单随机的,或者是由于过程之间的显著统计差异造成的。2、自变量X是
- 如何比较两个go对象完全相同在go语言中,要比较两个对象是否完全相同,我们可以使用以下三种方法:方法一:使用reflect.DeepEqua