DOM

2018-10-25 本文已影响0人 ft207741

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.");
}

1. 操作节点
- 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；

DOM

Menu

属性

方法

改变 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 动态脚本

属性

方法

改变 HTML 样式

创建新的 HTML 元素

Node类型

10.1.4 Text类型 page288

10.1.5 Comment类型 page291

10.1.8 DocumentFragment类型

10.1.9 Attr类型

10.2.1 动态脚本

猜你喜欢

热点阅读