最应该知道的DOM知识

前端技术 everyinch 1561℃ 0评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Shopping list</title>
</head>
<body>
<h1>What to buy</h1>
Don’t forget to buy this stuff.
<ul id="purchases">
    <li>A tin of beans</li>
    <li>Cheese</li>
    <li>Milk</li>
</ul>
</body>
</html>

dom1
dom2

二、DOM方法

1. 访问文档中元素

document.getElementById(“id”);获取给定id的元素,并将其作为对象。

document.getElementByTagName(“tagname”);获取所有标签名为tagname的元素,并把它保存在一个类似数组的列表中

var items = document.getElementsByTagName(“li”);

for (var i=0; i < items.length; i++) {

alert(typeof items[i]);

}

2. 读取元素的属性、节点值及其他节点数据

node.getAttribute(“attribute”);获取属性名为attribute的属性值。

node.setAttribute(“attribute”,”value”);设置属性名为attribute的值为value。

node.nodeType;读取节点类型(1:元素节点,2:属性节点,3:文本节点)

node.nodeName;读取节点名称(元素名字或#textNode)

node.nodeValue;读取或设置节点的值(文本节点的情况下则为文本内容)

3. 节点之间操作

node.previousSibling;获取上一个兄弟节点,并将它保存为一个对象。

node.nextSibling;获取下一个兄弟节点,并将它保存为一个对象。

node.childNodes;获取对象的所有子节点,并把它们储存到一个列表中。

node.firstChild和node.lastChild

node.parentNode;获取包含node的节点。

4. 创建新节点

document.createElement(“element”);创建一个名字为element的新元素,需要提供一个字符串形式的元素名

document.createTextNode(“string”);创建一个节点值为string的文本节点

newNode=node.cloneNode(bool);创建newNode节点作为node的副本(克隆)。如果bool值为true,这个克隆将包括原节点的所有子节点和属性的克隆

node.appendChild(newNode);将newNode作为子节点,添加在node所有子节点之后

node.insertBefore(newNode,oldNode);在node节点的子节点oldNode之前插入newNode

node.removeChild(oldNode);移除node节点的子节点oldNode

node.replaceChild(newNode,oldNode);使用节点newNode替换node节点的子节点oldNode

element.innerHTML;读写给定element的HTML内容,它是一个字符串,包括所有自己节点及它们的属性和文本内容



转载请注明:陈童的博客 » 最应该知道的DOM知识

喜欢 (1)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量