`
zhangziyueup
  • 浏览: 1196690 次
文章分类
社区版块
存档分类
最新评论

DOM下的节点属性和操作

 
阅读更多


属性:
1 .nodeName
节点名称,相当于tagName.属性节点返回属性名,文本节点返回#textnodeName,是只读的。
2 .nodeType
值:1,元素节点;2,属性节点;3,文本节点。nodeType是只读的。
3 .nodeValue
返回一个字符串,指示这个节点的值。元素节点返回null,属性节点返回属性值,文本节点返回文本。nodeValue可读可写,这是对元素节点不能写。一般只用于设置文本节点的值。
4 .childNodes
返回子节点数组。文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性,要删除添加节点可不能用操作childNodes数组的办法呃。
5 .firstChild
返回第一个子节点。文本和属性节点没有子节点,会返回一个空数组,这是针对这二位的特殊待遇。对于元素节点,若是没有子节点会返回null.有一个等价式:firstChild=childNodes[0].
6 .lastChild
返回最后一个子节点。返回值同firstChild,三方待遇参考上面。有一个等价式:lastChide=childNodes[childNodes.length-1].
7 .nextSibling()
返回节点的下一个兄弟节点。如果没有下一个兄弟节点的话,返回null。只读属性,不可以更改应用。
8 .previousSibling()
返回节点的上一个兄弟节点。同上。
9 .parentNode()
返回节点的父节点。document.parentNode()返回null,其他的情况下都将返回一个元素节点,因为只有元素节点拥有子节点,出了document外任何节点都拥有父节点。parentNode(),又是一个只读的家伙。


操作:
1. 创建节点
createElement('tagName');
如:var oP=document.createElement('p');创建了一个<p></p>标签。
2. 创建文本节点
createTextNode('text');
如:var oText=document.createTextNode('This is a paragh!');
3. 附加子节点
appendChild(o);其中o为节点对象。
如:document.body.appendChildNode(o);body末尾追加
document.forms[0].appendChildNode(o);form表单末尾追加
oP.appendChildNode(o);在元素内部的末尾追加,其总oP为节点对象。
4. 创建文档片断
createDocumentFragment();
如:var oF=document.createDocumentFragment();
5. 删除节点
removeChild(oP);
如:document.body.removeChild(oP),从body中移除oP节点对象。
6. 替换节点
replaceChid(newOp,targetOp);将目标节点targetOp替换为newOp
如:document.body.replayChild(oPa,oPb).ps:怎会这样特殊?源和目地操作数都是参数,为何调用者是document.body?记住先,别多管。——被替换的必须是body的子节点,可以用其他element替代document.body,前提一样,被替换的要是这个element的子节点。
7. 插入节点
insertBefor(newOp,targetOp);
insertAfter(newOp,targetOp);
8. 设置或得到属性节点
setAttribute('key','value');
getAttribute('key','value')
9.复制节点。
cloneNode(true/false)



分享到:
评论

相关推荐

    DOM下的节点属性和操作小结

    属性: 1 .nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text。nodeName,是只读的。...文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性,要

    DOM和BOM的使用

    元素节点对象是指 DOM 中的元素节点对象,它提供了许多方法和属性,开发者可以通过这些方法和属性来操作文档的内容和结构。 innerHTML innerHTML 是指 DOM 中的 innerHTML 属性,它允许开发者通过 JavaScript 修改...

    HTML DOM 常用的属性和方法

    DOM节点类型有多种,其中最常见的是: 1. ElementNode.ELEMENT_NODE(1):表示HTML元素节点,如`&lt;p&gt;`、`&lt;div&gt;`等。 2. TextNode.TEXT_NODE(3):表示文本节点,存储元素内的文本内容。 3. DocumentNode.DOCUMENT_...

    第06章 DOM节点操作(上)

    在本章“第06章 DOM节点操作(上)”中,我们将深入探讨Document Object Model(DOM)在JavaScript中的应用,以及如何通过DOM接口来操纵HTML或XML文档的结构、内容和样式。DOM是一种标准,它允许编程语言与网页内容...

    javascript节点操作DOM属性和方法

    - 属性操作:`node.getAttribute(name)` 获取属性值,`node.setAttribute(name, value)` 设置属性值,`node.removeAttribute(name)` 删除属性。 - 内容操作:`node.innerHTML` 用于获取或设置元素的HTML内容,`node....

    XML中dom根据属性检索节点(C#)

    DOM(Document Object Model)是XML文档的一种表示方式,它将XML文档转换为一个树形结构,使得开发者可以通过编程方式来访问和操作XML文档的各个部分。 在C#中,DOM接口提供了丰富的类库来处理XML文档,主要涉及到`...

    示例4:操作节点属性.rar_javascript操作节点属性

    理解并熟练掌握JavaScript操作DOM节点属性是成为合格前端开发者的关键技能之一。 通过示例4:操作节点属性的压缩包文件,你将能够深入学习这些概念,并通过实际代码示例进行实践,从而更好地理解和应用到自己的项目...

    DOM常用属性和方法

    为了更好地管理和操作这些节点,DOM定义了`nodeType`属性来区分不同的节点类型。下面列举了一些常见的节点类型及其对应的`nodeType`值: - **Element**: `Node.ELEMENT_NODE` (值为1),表示HTML或XML文档中的元素...

    javascript节点属性和方法

    JavaScript 节点属性和方法 JavaScript 节点的属性和方法是 DOM(文档对象模型)中最基础也是最重要的一部分。只有掌握了节点的属性和方法,才能更好地控制和操作 HTML 文档的结构和内容。 节点属性 1. ...

    DOM对象中的节点操作.pdf

    在当前互联网开发领域,DOM(文档对象模型)是前端开发人员在处理HTML文档时不可或缺的重要概念和工具。...通过深入学习和实践DOM节点操作,开发者可以有效地控制Web文档,实现更加丰富和动态的Web应用。

    JS操作DOM元素属性和方法大全

    3. **属性操作** - `getAttribute`: 获取元素的属性值。 - `setAttribute`: 设置元素的属性值。 - `removeAttribute`: 移除元素的属性。 4. **文本内容操作** - `textContent`: 获取或设置元素的纯文本内容。 ...

    第06章 DOM节点操作(下)

    四、属性操作 1. `.innerHTML`: 设置或获取元素的HTML内容。 2. `.textContent`: 设置或获取元素的纯文本内容。 3. `.getAttribute() / .setAttribute()`: 获取或设置元素的属性值。 4. `.removeAttribute()`: 移除...

    jQuery DOM节点操作源码

    5. **属性操作**:`attr()`, `removeAttr()`, `prop()`, `removeProp()` 用于获取、设置或移除元素的属性值,如`$("#input").attr("value", "新值")`。 6. **CSS操作**:jQuery提供`css()`方法,可以方便地设置或...

    js之 DoM操作、节点、节点之间关系的属性

    js之 DoM操作、节点、节点之间关系的属性

    domtoimage使用HTML5canvas从DOM节点生成图像

    "domtoimage使用HTML5canvas从DOM节点生成图像" 这个标题提到了一个名为 "domtoimage" 的工具,它利用HTML5的Canvas API将DOM(文档对象模型)中的节点转换为图像。这个过程通常用于网页截图或者在网页中保存和分享...

    谷歌获取网页dom的插件

    它将文档拆分为一系列的节点,如元素节点、文本节点、属性节点等,每个节点都具有相应的属性和方法。通过DOM,开发者可以轻松地找到、修改或添加文档的任何部分。 在描述中提到,这个插件可以用于爬取网页信息,...

    Dom编程之读写属性节点

    "Dom编程之读写属性节点"是DOM操作的一个关键部分,涉及到如何获取和修改文档中的属性节点值。在本文中,我们将深入探讨这一主题,以便更好地理解和掌握JavaScript操作DOM的精要。 首先,让我们了解什么是属性节点...

    JS操作DOM元素属性和方法.pdf

    3. 操作DOM节点: - `parentNode`: 返回某个节点的父节点。 - `appendChild(childNode)`: 向节点的子节点列表末尾添加新的子节点。 - `insertBefore(newNode, targetNode)`: 在指定的子节点前插入一个新的节点。 ...

    JS的简单DOM操作

    Node接口提供了所有节点通用的方法和属性,如nodeName、nodeValue、nodeType等,以及appendChild、removeChild、replaceChild、insertBefore等操作节点的方法。 2. 访问和操作节点 要访问文档中的特定节点,可以...

Global site tag (gtag.js) - Google Analytics