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

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_...

    javascript节点属性和方法

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

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

    使用javascript对DOM节点进行相关操作,非常详细。

    JS的简单DOM操作

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

    Dom编程之读写属性节点

    DOM操作中,读写属性节点。javascript操作DOM精点系列

    原生js操作dom实现上下左右移动.docx

    DOM将文档表示为一个树形结构,其中每个节点代表文档中的一个元素、属性或文本。 在本文中,我们将使用JavaScript来操作DOM,实现上下左右移动的功能。我们将使用getElementsByClassName和getElementsByTagName方法...

    XML编程从入门到精通

    • DOM 属性和方法 • DOM 访问节点 • DOM 节点信息 • DOM 节点列表 • DOM 遍历节点 • DOM 浏览器 • DOM 定位节点 节点操作 • DOM 获取节点 • DOM 改变节点 • DOM 删除节点 • DOM 替换节点 • DOM 创建节点...

    jacascript DOM节点——元素节点、属性节点、文本节点

    在实际开发中,DOM节点的操作非常常见,如动态添加、删除或修改元素和属性,或者通过遍历DOM树来查找特定的节点。理解元素节点、属性节点和文本节点的概念及其操作方法是JavaScript Web开发的基础。熟练掌握这些知识...

    java dom 操作xml

    java DOM 对xml文件的操作【分别对节点、节点属性、节点内容增删改查】

    基本DOM节点操作

    getElementByName():获取具有指定属性name的元素数组。 2、子节点 element.childNodes:返回该元素的子节点数组。注意:换行在浏览器中作为text节点,需要进行过滤 element.firstChild:该元素的第一个子节点。 ...

    JavaScript HTML DOM元素 节点操作汇总

    总之,JavaScript的DOM节点操作提供了强大的能力,使我们能够动态地更新页面内容,实现丰富的用户交互。通过熟练掌握这些基本操作,开发者可以轻松地创建动态、响应式的Web应用。在实际开发中,结合事件监听、CSS...

    JavaScript获取HTML DOM节点元素的方法的总结

    JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能,尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先,我们可以通过顶层的`document`对象来获取元素: 1. `document....

    javascript节点操作DOM属性和方法

    NULL 博文链接:https://sailinglee.iteye.com/blog/439007

    14jQueryDOM节点操作.docx

    在Visual Studio环境下,我们可以利用jQuery进行DOM节点的创建、插入等操作。下面我们将详细探讨这些知识点: 1. **创建DOM节点** - 使用`document.createElement()`函数可以创建新的DOM元素。例如,创建一个带有...

    CSS和DOM属性用法速查手册.doc

    此外,还有许多其他CSS属性和DOM属性,如`display`(控制元素的可见性),`margin`和`padding`(控制元素边距和内填充),`fontSize`(设置字体大小),以及`value`(获取或设置表单元素的值)等,都是开发者日常...

    JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf

    8. 设置节点属性 使用 `setAttribute()` 方法可以设置节点的属性。例如,`node.setAttribute("title", "abc");` 将设置 `&lt;div&gt;` 节点的 `title` 属性为 "abc"。 JavaScript 操作 DOM 可以实现动态地创建、插入、...

    JavaScript DOM节点操作方法总结

    下面就分别从对元素节点的操作和对属性节点的操作来介绍。 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素。具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到...

Global site tag (gtag.js) - Google Analytics