DOM—节点

节点的相关属性

1、nodeType:节点类型。返回的是一个数字,这个数字代表节点类型,只读。

节点类型: 1 — 元素类型:元素节点(标签)

节点类型: 2 — 元素类型:属性节点

节点类型: 3 — 元素类型:文本节点(标签里的内容)

节点类型: 8 — 元素类型:注释节点

节点类型: 9 — 元素类型:文档节点(整个节点)

注:标签之间的换行会出现一个空的文本节点。

2、nodeName:节点名称。返回当前节点的值,只读。

元素节点:nodeName与标签名相同;

属性节点:nodeName 返回的是属性的名;

文本节点:nodeName 返回的永远是#text;

文档节点:nodeName 返回的是#document;

3、nodeValue:节点值。

元素节点:nodeValue  返回的是undefined或null;

文本节点:nodeValue 返回的是文本本身;

属性节点:nodeValue 返回的是属性的值;

文档节点:nodeValue 返回null;

节点的相关操作

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

firstChild:返回第一个子节点;

lastChild:返回最后一个子节点;

nextSibling:返回给定节点下一个节点;

previousSibling:返回给定节点上一个节点;

parentNode:返回给定节点的父节点;

nextElementSibling:返回给定节点下一个元素节点;

previousElementSibling:返回给定节点上一个元素节点;

hasChildNodes():判断是否有子节点,存在返回true,不存在返回false,文本节点也算是节点;

document.body:直接访问body这个节点。

访问节点的四种方式

1、通过ID访问:document.getElementById(id名称);

返回指定ID的节点对象,具有唯一性,同一个页面,不能有相同的ID。

2、通过name访问:document.getElementByName(name值);

返回的是一个节点对象的集合(数组),name可以有多个相同的值。

3、通过class访问:document.getElementClassName(class值);

4、通过Tag(标签)访问:document.getElementByTagName(name值);

创建节点

1、CreateElement(name);     创建元素节点

2、CreateTextNode(text);    创建文本节点

3、CreateAttribute(name);  创建属性节点

4、CreateComment(text);   创建注释节点

5、CreateDocumentFragment();   创建文档碎片节点

添加节点

appendChild:指定节点的最后一个子节点列表之后,添加一个新的子节点。

删除节点

removeChild:删除子节点。

替换节点

replaceChild(newNode,oldChild);    替换子节点。

复制节点

cloneNode(节点名);    复制一个子节点。

注:节点名是boolean型:(1)true:加上所有子节点;
                            (2)false:只复制当前节点。

插入节点

insertBefore(newNode,oldNode)     插入到指定位置

时间: 2024-11-05 18:35:41

DOM—节点的相关文章

DOM节点创建(jQuery)

1DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览器提供的一些原生的

解析DOM节点对象的属性

1.文档对象模型(DOM) 定义:允许程序和脚本访问.更改文档内容.样式和结构.它是平台无关的,意味着可以在任何计算机上使用它.它是语言无关的,以为着它能够交换客户机和服务器之间的信息,而不管任意一边使用什么语言. 2.DOM节点 DOM把HTML(或XML)文档视为一颗或者一组数(是指结构类似),也就是有一个顶层和多个构成子层的分支,并且每个子层又有分支和更多子层,顶层是文档(document),而文档的根元素是<html>. 3.节点对象属性 DOM节点对象的属性 属性 方法 childN

DOM节点

DOM节点分为:文档节点.元素节点.属性节点.文本节点.注释节点.(换行符br也是一个节点). 增:append 删:remove 改:replace 查:ById 如何获取节点 porentNode:获取该元素父节点 chidNodes:获取对象所有的子节点 firstChild:获取该元素的第一个子节点 lastChild:获取该元素最后一个子节点 nextSibling:获取下一个兄弟元素 prevoussibing:获取该元素上一个兄弟节点 新增节点:①新建元素:creatElement

随笔一个dom节点绑定事件

以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的html内容. button点击事件:会生成一个li节点. 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 <ul class="ul

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

[ jquery 属性 .context ] 返回传给jQuery()的原始的DOM节点内容

返回传给jQuery()的原始的DOM节点内容:即jQuery()的第二个参数.如果没有指定,那么context指向当前的文档(document),可以与selector一起使用,用于精确检测选择器查询情况 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content=

访问DOM节点

我们来个例子,一个HTML里包含一段文本和一个无序的列表. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head&

DOM节点操作方法

只读的关系指针 DOM中的关系指针都是只读的 <div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); console.log(oBox.parentNode.nodeName);//BODY //在IE8-浏览器下会报错,在其他浏览器下忽略此条语句 oBox.parentNode = document; console

HTML DOM 节点

在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. DOM 节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 整个html文档也可以看作是一个节点,一个根节点,一个文档节点,document 节点 HTML 文档是由 HTML 元素定义的. 每个 HTML 元素是元素节点,什么是HTML 元素?