以下的例子以此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. Centos6.5下docker 环境搭建

    一.运行docker Linux内核版本需要在3.8以上,针对centos6.5 内核为2.6的系统需要先升级内核.不然会特别卡,退出容器. 在yum的ELRepo源中,有mainline(3.13. ...

  2. T-SQL 关闭数据库所有连接

    原文引用自: http://www.cnblogs.com/kissazi2/p/3462202.html 下面给出一种删除数据库活动连接的方式.将下面代码段中的"--修改一下"处 ...

  3. ASP.NET MVC Filter- 登录验证 【异步刷新列表视图】

    public class TAjaxListLoginValidateAttribute : FilterAttribute, IAuthorizationFilter { public void O ...

  4. Maven之构件

    定义 构件:在Maven中,任何依赖(jar包,tomcat等),或项目(自己打包的jar,war等)输出都可成为构件.每个构件都有自己的唯一标识(唯一坐标),由groupId,artifactId, ...

  5. Spring的简单demo

    ---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...

  6. 纯css3制作写轮眼开眼及进化过程

    今天是火影忍者(漫画)宣告完结的日子,也是我首发的第一个随笔.看过火影的朋友都知道,写轮眼是什么,这里就不多说了.下面就直接展示整个效果,上张图,先睹为快: 目前已经测试 IE10.Firefox浏览 ...

  7. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  8. R语言作为BI中ETL的工具

    R语言作为BI中ETL的工具,增删改 R语言提供了强大的R_package与各种数据库进行数据交互. 外加其强大数据变换清洗函数,为ETL提供一条方便快捷的道路. RODBC ROracal RMys ...

  9. C++ 与OpenCV 学习笔记

    联合体:当多个数据需要共享内存或者多个数据每次只取其一时,可以利用联合体(union) 1. 联合体是一种结构: 2. 他的所有成员相对于基地址的偏移量均为0: 3. 此结构空间要大到足够容纳最&qu ...

  10. C#小方法PadLeft 和 PadRight

    1.在 C# 中可以对字符串使用 PadLeft 和 PadRight 进行轻松地补位. PadLeft(int totalWidth, char paddingChar) //在字符串左边用 pad ...