JavaScript DOM节点和文档类型

Node类型

以下的例子以此HTML文档结构为例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <div id="demo">
    <ul id="contents">
      <li id="li_1"></li>
      <li id="li_2"></li>
      <li id="li_3"></li>
    </ul><p id="p_1"></p><p id="p_2"></p>
  </div>


  <script type="text/javascript" src="javascript_dom_1.js"></script>
</body>
</html>

获得子节点的集合：childNodes()

var ul = document.getElementById("contents");
for(var i= 0 ; i < ul.childNodes.length; i++){
  if(ul.childNodes[i].nodeType == "1"){
    console.log(ul.childNodes[i].id);
  }
}

运行结果：

li_1 
li_2 
li_3

判断的节点的类型用 nodeType，下面列出一个表格表示不同类型的对应不同的值（常用）：

类型 值
element 1
text 3
comment 8
document 9

上面的例子中，节点包括text类型和element类型，所以要判断一下是否是element类型。

获得元素的父节点：parentNode()

var li = document.getElementById("li_1");
console.log(li.parentNode.id);

运行结果：

conments

获得相邻同胞节点

previousSibling : 获得上一个同胞节点
nextSibling : 获得下一个同胞节点

var p1 = document.getElementById("p_1");

console.log(p1.previousSibling.id);
console.log(p1.nextSibling.id);

运行结果：

contents
p_2

我们看一下html代码，为什么<p>标签要放在ul后面，这里是为了方便测试，IE和其他浏览器在这里表现不同，对于其他浏览器，ul的子元素其实是有7个，而IE是3个，我们看到的确实是只有3个li，其他浏览器把li与li之间的换行视为有一个text节点，所以就有了7个节点。

获得首尾子节点

firstChild:获得第一个子节点
lastChild:获得最后一个子节点

<p id="demo2"><strong id="strong_1"></strong><a id="a"></a><strong id="strong_2"></strong></p>

var p = document.getElementById("demo2");
console.log(p.firstChild.id);
console.log(p.lastChild.id);

运行结果：

strong_1
strong_2

判断是否有子节点：hasChildNodes()

若有子元素，返回true，否则，返回false

在子节点尾部插入节点：appendChild()

var newNode = document.createElement("div");
newNode.id = "newNode";
var getDemo = document.getElementById("demo1");
getDemo.appendChild(newNode);

console.log(getDemo.lastChild.id);

运行结果：

newNode

在子节点前面插入节点：insertBefore()

insertBefore(参数1，参数2)

  • 参数1：要插入的节点
  • 参数2：节点，表示在这个节点前面插入节点，若为null，则在末尾插入
var newNode = document.createElement("div");
newNode.id = "newNode";
var getDemo = document.getElementById("demo1");
getDemo.insertBefore(newNode,document.getElementById("contents"));

console.log(getDemo.childNodes[1].id);

运行结果：

newNode

替换子节点：replaceChild()

replaceChild(参数1，参数2)

  • 参数1：要插入的节点
  • 参数2：表示要被替换的节点

可参考insertBefore()的例子。

删除子节点：removeChild()

removeChild(参数1)

  • 参数1：要删除的节点

克隆节点：cloneNode()

node.cloneNode(true|false)

  • node:被克隆的节点
  • 传入一个参数，如果是true，那么进行深复制（连同子节点一起复制），如果是false，那么进行浅复制，只复制节点本身。
var ul = document.getElementById("contents");
var deepClone = ul.cloneNode(true);
var shadowClone = ul.cloneNode(false);

console.log(deepClone.childNodes.length);
console.log(shadowClone.childNodes.length);

运行结果：

7
0

如果不传值，那么默认使用浅克隆。

Document类型

document的属性

  • document.documentElement 指向<html>元素
  • document.body 指向<body>元素
  • document.doctype 指向<!DOCTYPE>元素

HTMLDocument的属性

  • document.title 取得文档的标题
  • document.URL 取得完整的URL
  • document.domain 取得域名
  • document.referrer 取得来源页面的URL

查找元素

  • document.getElementById(id) 按id查找，返回一个节点
  • document.getElementsByTagName(tabName) 按标签名查找，返回一个集合
  • document.getElementsByName(name) 按name查找，返回一个集合，此方法只有HTMLDocument类型才有

写入

  • document.write()

示例：

document.write("<div>Hi,Michael!</div>");

var newNode = document.createElement("div");
newNode.innerHTML = "Hi,Michael!";
document.write(newNode.innerHTML);

以上两段代码的结果是相同的。

  • document.writeln()

和write()一样，只不过会自动换行

参考

  • 《JavaScript高级程序设计》
posted @ 2016-11-22 17:45  TabWeng  阅读(471)  评论(0)  编辑  收藏  举报