博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML DOM
阅读量:6118 次
发布时间:2019-06-21

本文共 2639 字,大约阅读时间需要 8 分钟。

hot3.png

文档对象模型DOM(Document Object Module)定义了用户操作文档对象的接口,它使得用户对HTML有了空前的访问能力,并使开发者能将HTML作为XML文档来处理。
-

属性

类型

说明

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);
}
 

转载于:https://my.oschina.net/u/729507/blog/140640

你可能感兴趣的文章
好记性不如烂笔杆-android学习笔记<十六> switcher和gallery
查看>>
JAVA GC
查看>>
codeforce 599B Spongebob and Joke
查看>>
3springboot:springboot配置文件(外部配置加载顺序、自动配置原理,@Conditional)
查看>>
9、Dubbo-配置(4)
查看>>
前端第七天
查看>>
BZOJ 2190[SDOI2008]仪仗队
查看>>
图解SSH原理及两种登录方法
查看>>
[转载] 七龙珠第一部——第058话 魔境圣地
查看>>
【总结整理】JQuery基础学习---样式篇
查看>>
查询个人站点的文章、分类和标签查询
查看>>
基础知识:数字、字符串、列表 的类型及内置方法
查看>>
JSP的隐式对象
查看>>
P127、面试题20:顺时针打印矩阵
查看>>
JS图片跟着鼠标跑效果
查看>>
[SCOI2005][BZOJ 1084]最大子矩阵
查看>>
学习笔记之Data Visualization
查看>>
Leetcode 3. Longest Substring Without Repeating Characters
查看>>
【FJOI2015】金币换位问题
查看>>
数学之美系列二十 -- 自然语言处理的教父 马库斯
查看>>