以下的例子以此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. iOS 组件化方案探索

    来自bang's blog http://blog.cnbang.net/tech/3080/

  2. Struts2返回json格式数据踩坑记录

    事件起因 昨天提测修改冻结/解冻银行卡样式的功能,微姐测试过程中发现调用ajax请求耗时过长,今天来排查,发现浏览器请求/finance/ajax/freeze/ajaxGetShopLists时,对 ...

  3. eclipse设置快速提示符

    省掉废话,一个快速提示符真的能快速地提高编程效率. 下面介绍如何设置eclipse的快速提示符. 步骤如下: Windows --> preferences --> java --> ...

  4. JAVA语法基础作业——动手动脑以及课后实验性问题 （八）

    一.动手动脑 运行AboutException.java示例,了解Java中实现异常处理的基础知识. 1)源代码 import javax.swing.*; class AboutException ...

  5. java从基础知识（十）java多线程（上）

    线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元.另外,线程是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点 ...

  6. Array的个人总结

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  7. DOM0编程与基础方法

    ## 这里记录一下DOM编程的基础与方法----### DOM 的O:对象 objectO表示Object,对象的意思.JavaScript中对象可以分为三种类型1. 用户定义对象(user-defi ...

  8. 学习 opencv---(6)玩转opencv源代码：生成opencv 工程解决方案与opencv 源码编译

    在这篇中,我们探讨如何通过已安装的opencv选择不同的编译器类型,生成高度还原的OpenCV开发时的解决方案工程文件,欣赏OpenCV新版本中总计 六十六多万行的精妙源代码.我们可以对其源代码进行再 ...

  9. TI PDK3.0 qt 交叉编译环境设置

    上午剑锋给的方法,成功在qtcreator上面加入TI官方的qmake以及他的交叉编译器. 1. 步骤如下: 1. 我假设TI PDK3.0 安装目录为顶层目录. 2. 进入linux-devkit ...

  10. mysql使用load导入csv文件所遇到的问题及解决方法

    使用navicat的客户端插入csv的数据文件,有一种非常简单的方式,即使用导入向导,直接根据数据匹配即可. 使用load的方式. 由于本项目中插入数据表量大而且格式统一,故首先使用创建字段creat ...