以下的例子以此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 DOM节点和文档类型的更多相关文章

  1. 深入理解DOM节点类型第三篇——注释节点和文档类型节点

    × 目录 [1]注释节点 [2]文档类型 前面的话 把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug.IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明 ...

  2. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

  3. javascript DOM 节点 第18节

    <html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...

  4. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  5. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  6. javascript DOM节点

    获得子节点方式: 1.将文本内容也当成节点 childNodes firstChild lastChild 2.获得标签为内容的节点 children firstElementChild lastEl ...

  7. JavaScript Dom编程艺术（1）

    Dom是一种可以供多种环境和多种程序设计语言使用的API: 一份文档就是一个节点树: 节电分为不同的类型:元素节点,属性节点,文档节点,元素节点分为属性节点和文档节点: getelementbyid( ...

  8. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  9. javascript DOM中的节点层次和节点类型概述

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...

随机推荐

  1. Sublime Text3 BracketHighlighter高亮色彩配置

    今天玩Sublime ,结果安装了BracketHighlighter插件后,没效果,郁闷,度娘后总结如下: BracketHighlighter插件能为Sublime Text提供括号,引号这类高亮 ...

  2. [转]socket 通俗解释

    socket是网络编程的基础,本文用打电话来类比socket通信中建立TCP连接的过程.    socket函数,表示你买了或者借了一部手机.    bind函数,告诉别人你的手机号码,让他们给你打电 ...

  3. Android 的Parcelable接口

    此文转载自http://www.cnblogs.com/renqingping/archive/2012/10/25/Parcelable.html 1. Parcelable接口 Interface ...

  4. Android之Linearlayouy线性布局

    写了个小例子xml代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

  5. Linux编程环境

    yum -y install gcc gcc-c++ libtool-ltdl libtool-ltdl-devel openssl openssl-devel curl curl-devel lib ...

  6. jQuery中10个非常有用的遍历函数

    使用jQuery,可以 很容易的选择HTML元素.但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情.在这篇教程中,我们将探讨十种方 法去精炼和扩展我们将要操作的集合. HTM ...

  7. Android中处理崩溃异常

    转自:http://my.eoe.cn/817027/archive/17997.html 大家都知道,现在安装Android系统的手机版本和设备千差万别,在模拟器上运行良好的程序安装到某款手机上说不 ...

  8. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  9. noi前机房日常

    2015/6/16 上午a了一道省选分组赛day1t2,并在cf100553H双倍经验,好评 bzoj3152(ctsc2013)贪心,用priority_queue要清空 bx2k上午交了几十题,他 ...

  10. Android学习资料收集

    1.Android 学习之路 http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/