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);
}
标签:js,DOM模型
0
投稿

猜你喜欢

  • Python实现一键整理百度云盘中重复无用文件

    2023-09-23 04:33:38
  • 使用线框图来简化你的产品设计流程

    2011-06-10 13:10:00
  • 浅谈tensorflow 中tf.concat()的使用

    2023-07-21 20:24:08
  • Git配置.gitignore文件忽略被指定的文件上传

    2022-09-23 03:00:08
  • mysql 5.7.16 安装配置方法图文教程

    2024-01-28 14:26:32
  • vue中的传值及赋值问题

    2024-05-28 15:45:32
  • 安装并免费使用Pycharm专业版(学生/教师)

    2023-09-27 08:14:13
  • Tornado高并发处理方法实例代码

    2022-10-13 15:30:07
  • Python解析JSON数据的基本方法实例代码

    2021-02-13 20:40:01
  • Python中协程用法代码详解

    2021-01-26 06:33:24
  • python网络爬虫精解之Beautiful Soup的使用说明

    2021-02-21 15:20:48
  • 教你在MySQL 5.0以上版本中配置主从库

    2009-01-04 13:17:00
  • 浅谈SQL Server 对于内存的管理[图文]

    2024-01-14 07:41:44
  • Go实现文件上传和下载

    2023-06-19 07:42:32
  • Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

    2023-08-06 15:58:18
  • python获取从命令行输入数字的方法

    2021-08-23 15:19:02
  • Mac下通过brew安装指定版本的nodejs教程

    2024-05-03 15:56:11
  • SQL Server数据库涉及到的数据仓库概念

    2009-01-15 12:58:00
  • 用Python分析3天破10亿的《我不是药神》到底神在哪?

    2023-04-29 06:16:26
  • SQLServer 循环批处理

    2024-01-20 02:39:46
  • asp之家 网络编程 m.aspxhome.com