Menu
属性
- innerHTML
- nodeName
- nodeValue
- nodeType
方法
改变 HTML 样式
创建新的 HTML 元素
Node类型
10.1.4 Text类型 page288
10.1.5 Comment类型 page291
10.1.8 DocumentFragment类型
10.1.9 Attr类型
10.2 DOM 操作技术
10.2.1 动态脚本
属性
- innerHTML
- nodeName
- nodeValue
- nodeType
方法
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
getAttribute()
setAttribute()
改变 HTML 样式
objH = document.getElementById("test");
// 修改元素样式；
objH.style.border="1px solid red";
objH.style.font = "160px 微软雅黑"
创建新的 HTML 元素
- 如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
Node类型
- 每个节点都有一个 nodeType 属性，用于表明节点的类型。节点类型由在 Node 类型中定义的下列12 个数值常量来表示，任何节点类型必居其一：
- Node.ELEMENT_NODE(1)；
- Node.ATTRIBUTE_NODE(2)；
- Node.TEXT_NODE(3)；
- Node.CDATA_SECTION_NODE(4)；
- Node.ENTITY_REFERENCE_NODE(5)；
- Node.ENTITY_NODE(6)；
- Node.PROCESSING_INSTRUCTION_NODE(7)；
- Node.COMMENT_NODE(8)；
- Node.DOCUMENT_NODE(9)；
- Node.DOCUMENT_TYPE_NODE(10)；
- Node.DOCUMENT_FRAGMENT_NODE(11)；
- Node.NOTATION_NODE(12)。
- 通过比较上面这些常量，可以很容易地确定节点的类型，例如：
if (someNode.nodeType == Node.ELEMENT_NODE){ //在 IE 中无效
alert("Node is an element.");
}
-
- 操作节点
- someNode.append(newNode) 会在node的子节点最后添加一个新节点，如果node本身存在，那么就把这个node放在子节点的最后位置；
10.1.4 Text类型 page288
- nodeType 的值为 3；
- nodeName 的值为"#text"；
- nodeValue 的值为节点所包含的文本；
- parentNode 是一个 Element；
- 不支持（没有）子节点。
- 可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本，这两个属性中包含的值相同。对 nodeValue 的修改也会通过 data 反映出来，反之亦然。使用下列方法可以操作节点中的文本。
- appendData(text)：将 text 添加到节点的末尾。
- deleteData(offset, count)：从 offset 指定的位置开始删除 count 个字符。
- insertData(offset, text)：在 offset 指定的位置插入 text。
- replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本。
- splitText(offset)：从 offset 指定的位置将当前文本节点分成两个文本节点。
- substringData(offset, count)：提取从 offset 指定的位置开始到 offset+count 为止处的字符串。
- 除了这些方法之外，文本节点还有一个 length 属性，保存着节点中字符的数目。而且，nodeValue.length 和 data.length 中也保存着同样的值。
-
获得文本节点
- element.firstChild or element.childNodes[0]
-
获得文本节点的值
element.firstChild.nodeValue or element.childNodes[0].data -
修改文本节点的值
element.firstChild.nodeValue = “new text content...” -
合并文本节点
- 如果一个元素下有多个文本节点，就可以利用normalize()方法合并多个文本节点；
- element.normalize()
-
分割文本节点
- 文本节点.splitText(offset)
- return offset - end 的text创建个一个text节点；
- 原来的节点就分成2个，offset之前一个，offset-end一个；
10.1.5 Comment类型 page291
- 注释在 DOM 中是通过 Comment 类型来表示的。 Comment 节点具有下列特征：
- nodeType 的值为 8；
- nodeName 的值为"#comment"；
- nodeValue 的值是注释的内容；
- parentNode 可能是 Document 或 Element；
- 不支持（没有）子节点。
- Comment 类型与 Text 类型继承自相同的基类，因此它拥有除 splitText()之外的所有字符串操作方法。与 Text 类型相似，也可以通过 nodeValue 或 data 属性来取得注释的内容。
- 注释节点可以通过其父节点来访问，
10.1.8 DocumentFragment类型
- createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
- 当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
- 你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮更改列表项,使用createDocumentFragment方法,然后在列表的最后一个孩子添加列表项。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var d=document.createDocumentFragment(); // 1.创建虚拟节点；
d.appendChild(document.getElementsByTagName("LI")[0]); //2.虚拟节点增加li-coffee节点
d.childNodes[0].childNodes[0].nodeValue="Milk"; coffee changed milk
document.getElementsByTagName("UL")[0].appendChild(d);
};
</script>
</body>
</html>
10.1.9 Attr类型
元素的特性在 DOM 中以 Attr 类型来表示。在所有浏览器中（包括 IE8），都可以访问 Attr 类型
的构造函数和原型。从技术角度讲，特性就是存在于元素的 attributes 属性中的节点。特性节点具有
下列特征：
- nodeType 的值为 2；
- nodeName 的值是特性的名称；
- nodeValue 的值是特性的值；
- parentNode 的值为 null；
- 在 HTML 中不支持（没有）子节点；
- 在 XML 中子节点可以是 Text 或 EntityReference。
- 尽管它们也是节点，但特性却不被认为是 DOM 文档树的一部分。开发人员最常使用的是 getAttribute()、 setAttribute()和 remveAttribute()方法，很少直接引用特性节点。
- Attr 对象有 3 个属性： name、 value 和 specified。其中， name 是特性名称（与 nodeName 的
值相同）， value 是特性的值（与 nodeValue 的值相同），而 specified 是一个布尔值，用以区别特
性是在代码中指定的，还是默认的。 - 使用 document.createAttribute()并传入特性的名称可以创建新的特性节点。例如，要为元素
添加 align 特性，可以使用下列代码：
var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);
alert(element.attributes["align"].value); //"left"
alert(element.getAttributeNode("align").value); //"left"
alert(element.getAttribute("align")); //"left <- 推荐
- 使用 getAttribute()、setAttribute()和 removeAttribute()方法远比操作特性节点更为方便。
10.2.1 动态脚本
- 在一个函数里创建一个包含外部JS文件的script node；调用此函数就能加载一个script；
网友评论