DOM1定义了一个node接口,该接口由DOM的所有节点类型实现。

所有的节点都存在这样或那样的关系。在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素。

这里要注意一个概念:nodeList

输出:

如下例子:

 <div id="myDiv"> </div><!-- 此处有空格 -->
<script>
var div = document.getElementById('myDiv');
var test = div.firstChild;
if (test.nextSibling === null) {
alert('good');//输出good
}
if (test.previousSibling === null) {
alert('bad');//输出bad
}

操作节点

加入到文档中

     <style>
#test {font-size: 20px;background: red;height: 100px;}
#myDiv {color:red;}
</style>
</head>
<body>
<ul id="test">
<li>1</li><li>2</li><li>3</li>
</ul>
<script>
var oul = document.getElementById('test');
var deep = oul.cloneNode(true);
alert(deep.childNodes.length);//7
oul.parentNode.insertBefore(deep,oul);
var shallow = oul.cloneNode(false);
alert(shallow.childNodes.length);//0
oul.parentNode.insertBefore(shallow,deep); </script>

输出:

第十章—DOM(0)—NODE类型的更多相关文章

  1. 第十章—DOM(一)——Document类型

    DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...

  2. js DOM Node类型

    DOM(文档对象模型)是针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的.以特定节点为根节点的树形结构.节点分为12种不同的类型,每种类型分别表示 ...

  3. 从原型链看DOM--Node类型

    前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...

  4. DOM(一):节点层次-Node类型

    Node类型DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现,每个节点都有一个nodeType属性,用于表明节点的类型.节点类型由在Node类型中定义的下列12个数值常量来表示, ...

  5. Node类型知识大全

    Node类型 1.节点关系 每个节点都有一个childNodes属性,其中保存着一个NodeList对象.NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点.请注意, ...

  6. DOM 节点node

    DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构,即在HTML中所有内容都是节点.文档节点是每个文档的根节点,文档节点有一个子节点,称为文档元素.每个文档只能有一个文档元素.在HTM ...

  7. JavaScript高级程序设计学习笔记第十章--DOM

    1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...

  8. 读书笔记 - js高级程序设计 - 第十章 DOM

      文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...

  9. 第十章 DOM

    10.1节点层次 html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型. 10.1.1 Node类型 JavaScript中的所有节点类型 ...

随机推荐

  1. nginx源码分析——内存池

    内存池的目的就是管理内存,使回收内存可以自动化一些. ngx_palloc.h /* * Copyright (C) Igor Sysoev * Copyright (C) Nginx, Inc. * ...

  2. 模板——网络流Dinic

    感谢这位大佬的博客:https://www.cnblogs.com/SYCstudio/p/7260613.html 给予了我莫大的帮助! 主要说一下网络流的几个注意点: 1.和二分图匹配相似,无法继 ...

  3. 《DSP using MATLAB》Problem 8.31

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  4. 慢日志:mysqlsla

    Linux服务器收集到的慢日志文件拿到本地(Windows7)的虚拟机(CentOS6.5)中去分析.首先使用Samba工具配置CentOS和Windows文件共享,然后使用mysqlsla分析慢查询 ...

  5. elasticsearch filters特性

    使用filters优化查询 ElasticSearch支持多种不同类型的查询方式,这一点大家应该都已熟知.但是在选择哪个文档应该匹配成功,哪个文档应该呈现给用户这一需求上,查询并不是唯一的选择.Ela ...

  6. poj2406

    求循环节之类的问题 #include<iostream> #include<cstdio> #include<queue> #include<algorith ...

  7. JZOJ5895【NOIP2018模拟10.5】旅游

    题目 Description

  8. java虚拟机(十二)--可视化工具分析GC日志

    在上篇博客中,我们学习了Parallel.CMS.G1三种垃圾收集器的日志格式,本次我们通过工具去分析日志,会更加的直观 日志格式博客地址:java虚拟机(十一)--GC日志分析 GCeasy: 这是 ...

  9. 阿里云 Aliplayer高级功能介绍(五):多语言

    基本介绍 Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务 ...

  10. csp-s模拟43,44 A,C,F

    题面:https://www.cnblogs.com/Juve/articles/11534880.html A: T可以写成如下形式:$T=b^k*S+m*a$, 其中$m=\sum\limits_ ...