以下的例子以此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. js像素运算问题

    通过DOM获取的某一距离属性(比如left)是带px单位的,直接对其算术运算不起效,要先把获取到的值处理一下去掉px单位. 方法一(用处理字符串的方式去除px): var x=document.get ...

  2. 隐式的bean发现与自动装配机制

    使用beans.xml文件进行bean的创建和注入通常是可行的,但在便利性上Spring提供了更简单的方法--自动装配 接下来我们假设一个场景:我有若干播放器(MediaPlayer{CD播放器/MP ...

  3. c++文件输入输出流fstream，对输入>>和输出<<重载

    1. fstream 继承自iostream --> 要包含头文件#include<fstream> 2. 建立文件流对象 3. 打开文件夹 4. 测试是否打开成功 5. 进行读写操 ...

  4. Sicily 1150: 简单魔板（BFS）

    此题可以使用BFS进行解答,使用8位的十进制数来储存魔板的状态,用BFS进行搜索即可 #include <bits/stdc++.h> using namespace std; int o ...

  5. Sql Server函数全解<三>数据类型转换函数和文本图像函数

    阅读目录 一:数据类型转换函数 二:文本和图像函数 一:数据类型转换函数 在同时处理不同数据类型的值时,SQL Server一般会自动进行隐士类型转换.对于数据类型相近的值是有效的,比如int和flo ...

  6. java大并发数据保存方案

    做了几年.net,如今终于要做java了. 需求: 线下终端会定时上传gps位置到服务端,服务端收到数据保存到mysql数据库,当线下终端过多时,问题出现了,首当其冲的是数据库连接池经常会崩溃,单个t ...

  7. （三）Netty源码学习笔记之boss线程处理流程

    尊重原创,转载注明出处,原文地址:http://www.cnblogs.com/cishengchongyan/p/6160194.html  本文我们将先从NioEventLoop开始来学习服务端的 ...

  8. 常用的java正则表达式

    常用的正则表达式主要有以下几种: 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了哦 获取日期正则表达式:\d{4}[年|\-|\.] ...

  9. js方法入参或局部变量和全局变量重名，用来赋值全局变量会失败

    今天遇到个bug,最后终于知道原因了,js方法入参和全局变量重名,用入参赋值全局变量失败,就是说方法入参不能和全局变量重名. 现在下面的例子也说明,局部变量和全局变量不可以同名不光是入参,只要同名赋值 ...

  10. Xcode 快速开发 代码块

    Xcode的代码片段(Code Snippets)创建自定义的代码片段,当你重用这些代码片段时,会给你带来很大的方便. 常用的: 1.strong:@property (nonatomic,stron ...