javascript-节点属性详解
根据 DOM,HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的:
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于**注释节点 **
一、如何获得节点引用
** 1.旧的获取节点引用方式**
getElementById()
1 | //查找文档中的一个特定的元素,最有效的方法是 getElementById(),一定要有document |
getElementByTagName() //返回带有指定标签名的对象集合
getElementByName()
*******************************************
劣势:
1.浪费内存
2.逻辑性不强
*******************************************
** 2.通过节点 关系属性 获得节点的引用**
对象.parentNode 获得父节点的引用
1 | //父节点 |
对象.childNodes 获得子节点的集合
对象.firstChild 获得第一个子节点
对象.lastChild 获得最后个子节点
1 | //最后一个子节点 |
对象.nextSibling 获得下一个兄弟节点的引用
对象.previousSibling 获得上一个兄弟节点的引用
****************************************************************
劣势:兼容性不好。
FF会把例如后面的所有的空白节点都读成一个子节点
IE会把最后一个空白节点读成子节点
****************************************************************
二、节点的信息(属性)
节点类型 节点名字 节点值<br /> nodeType(数值) nodeName nodeValue
nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点,则 nodeType 属性将返回 1。
如果节点是属性节点,则 nodeType 属性将返回 2
元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
1 | alert(outdiv.nodeType) |
三、兼容性的方法
javascript-节点的增、删、改、查实例讲解
一、创建节点
** 1>创建元素节点**
document.createElement(“元素标签名”);
1 | var elea=document.createElement("a"); |
2>创建属性节点
document.createAttribute(“属性名”);
对象.属性=”属性值”
对象.setAttribute(属性名,属性值)
对象.getAttribute(属性名,属性值)
3>创建文本节点
对象.innerHTML=””;
1 | elea.innerHTML="链接"; |
document.createTextNode(“文本”);
1 | var h3text=document.createTextNode("测试"); |
二、追加到页面当中
父对象.appendChild(追加的对象) 插入到最后
1 | document.body.appendChild(elea); |
父对象.insertBefore(要插入的对象,之前的对象) 插入到最后
1 | var innerdiv=document.getElementById("innerdiv"); |
三、修改(替换)节点
父对象.replaceChild(要修改的对象,被修改的);
1 | innerdiv.replaceChild(elep,eleh3) |
四、删除节点
父对象.removeChild(删除的对象)
如果确定要删除节点,最好也清空内存 对象=null;
1 | innerdiv.removeChild(elep) |