JavaScript DOM节点和文档类型

时间:2022-10-18 03:23:26

以下的例子以此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()一样,只不过会自动换行