DOM10-1节点层次

DOM（问的那个对象模型）是针对HTML和XML文档的API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的一部分。

每个节点都拥有各自的特点、数据和方法，另外和其他节点也存在某种关系。

文档元素是文档的最外层元素，文档中的所有元素都包含在文档元素中，每个文档只有一个文档元素。

在HTML中文档元素始终是<html>

在XML中没有预定义的元素，因此任何元素都可能成为文档元素

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

    <p>内容</p>

 </body>

</html>

NODE 类型

Dom定义了一个接口，该接口将由DOM中的所有节点类型实现

每个节点都有一个nodeType属性

12个类型用12个数值常量来表示

    const unsigned short      ELEMENT_NODE                   = 1;   元素节点

    const unsigned short      ATTRIBUTE_NODE                 = 2;   属性节点

    const unsigned short      TEXT_NODE                      = 3;   文本节点

    const unsigned short      CDATA_SECTION_NODE             = 4;   CDATA 区段

    const unsigned short      ENTITY_REFERENCE_NODE          = 5;   实体引用元素

    const unsigned short      ENTITY_NODE                    = 6;   实体

    const unsigned short      PROCESSING_INSTRUCTION_NODE    = 7;   表示处理指令

    const unsigned short      COMMENT_NODE                   = 8;   注释节点

    const unsigned short      DOCUMENT_NODE                  = 9;   最外层的Root element,包括所有其它节点

    const unsigned short      DOCUMENT_TYPE_NODE             = 10;   <!DOCTYPE………..>

    const unsigned short      DOCUMENT_FRAGMENT_NODE         = 11;   文档碎片节点

    const unsigned short      NOTATION_NODE                  = 12;   DTD 中声明的符号节点

所以调用每一个节点的nodeType可以返回相应的节点的属性值

通过比较可以知道节点的类型

if (someNode.nodeType == Node.ElEMENT_NODE)

        {

            console.log('Node is an element');

        }

但是IE没有公开Node类型的构造函数，所以上一种方法不支持IE

所以通用的做法是

if (someNode.nodeType == 1)

        {

            console.log('Node is an element');

        }

1、nodeName和nodeValue属性

在使用这两个值之前先检测一下节点的类型

if (someNode.nodeType == 1)

        {

            var value = someNode.nodeName;

        }

如果是元素节点，就保存nodeName的值，nodeName中始终保存着元素的标签名，nodeValue中为null

每一个节点都有childNodes　　属性，其中保存着NodeList对象，NodeList对象是类数组对象，用于保存一组有序的节点，此对象有length属性但是不是Array的实例

childNodes属性只能返回下一层的同级节点，但是不能返回所有子节点的个数

function convertToArray(nodes){

            var array = null;

            try

            {

                /*

                    array = Array.prototype.slice.call(nodes,0);

                */

                array = [].slice.call(nodes,0);//兼容非IE类

            }

            catch (ex)

            {

                array = [];

                /*

                    因为nodes是动态的，所以不能写为

                    for (var i=0 ;i<nodes.length ;i++ )会陷入死循环

                */

                for (var i=0,len=nodes.length;i<len ;i++ )

                {

                    array.push(nodes[i]);

                }

            }

            return array;

        }

每一个节点都有parentNode属性，该属性指向文档书中的父节点。

有三种方法可以判断当前节点是否有子节点。

node.firstChild !== null
node.childNodes.length > 0
node.hasChildNodes()

3.节点操作

IE9以前不会把所有的空格作为一个节点，标准浏览器会把空格作为一个节点

因为关系指针都是只读的，所以DOM提供了一些操作节点的方法。

appendChild()　　用于向childNodes列表的末尾添加一个节点。

childNodes和父节点和以前的最后一个节点关系指针都会发生相应的更新

 <body>

     <ul><li>klkx1</li><li>klkx2</li></ul>

    <script>

        var oUl = document.getElementsByTagName('ul')[0];

        var oLi = document.createElement('li');

        oLi.innerText = 'klkx3';

        console.log(oUl.lastChild);

        var s1 = oUl.appendChild(oLi);

        console.log(s1);

        console.log(oUl.lastChild);

    </script>

 </body>

如果要插入的节点是已经存在的节点，那结果就是该节点从原来的位置转移到新的位置，但是不会重新拷贝这个节点

<body>

     <ul><li>klkx1</li><li>klkx2</li></ul><ul><li>klkx3</li><li>klkx4</li></ul>

    <script>

        var oUl1 = document.getElementsByTagName('ul')[0];

        var oUl2 = document.getElementsByTagName('ul')[1];

        setTimeout(function(){

            var s1 = oUl1.appendChild( oUl2 );

            console.log(s1);

        },3000);

    </script>
</body>

任何DOM节点也不能同时出现在文档的多个位置

<body>

     <ul><li>klkx1</li><li>klkx2</li></ul>

    <script>

        var oUl1 = document.getElementsByTagName('ul')[0];

        setTimeout(function(){

            var s1 = oUl1.appendChild( oUl1.firstChild );

            console.log(s1);

        },3000);

        console.log(oUl1);

    </script>

 </body>

insertbefore()方法：

returnNode/*返回插入的节点*/ = parentNode/*插入的父级节点*/.insertbefore(newNode/*要插入的节点*/,null/*坐标节点*/);

如果null，则插入到最后的位置

插入到坐标节点的前辈前边

<body>

     <ul><li>klkx1</li><li>klkx2</li></ul>

    <script>

        var oUl1 = document.getElementsByTagName('ul')[0];

        var aLi = oUl1.getElementsByTagName('li');

        var oLi = document.createElement('li');

        oLi.innerText = 'klkx3';

        setTimeout(function(){

            var s1 = oUl1.insertBefore( oLi,oUl1.lastChild );

            console.log(s1);

        },3000);

        console.log(oUl1);

    </script>

 </body>

replaceChild()替换一个节点

returnNode/*返回替换的节点*/ = parentNode/*操作的父级节点*/.replaceChild(newNode/*新节点*/,oldNode/*要替换节点*/);

如果节点已经存在，存在的的节点会替换老节点的位置

<body>

     <ul><li>klkx1</li><li>klkx2</li></ul><ul><li>klkx3</li><li>klkx4</li></ul>

    <script>

        var oUl1 = document.getElementsByTagName('ul')[0];

        var oUl2 = document.getElementsByTagName('ul')[1];

        var aLi = oUl1.getElementsByTagName('li');

        setTimeout(function(){

            var s1 = oUl1.replaceChild( oUl2,aLi[1] );

            console.log(s1);

        },3000);

        console.log(oUl1);

    </script>

 </body>

如果只想移除不想替换可以用removeChild()

这个方法接受一个参数，即要移除的节点，被移除的节点将被称为返回值

虽然在文档中还有这些节点存在，但是没有这些节点的位置

上边的几个方法都是操作的某个节点的子节点，必须先取得子节点的父节点，如果在不支持子节点上调用，会出现错误

cloneNode()

方法：node.cloneNode(Boolean)

参数可以是

true　　　　复制整个节点和属性和子孙节点

false 　　　　只复制当前节点不复制属性

但是复制的节点没有所属关系，只能通过appendChild()和insertBefore()和replaceChild()进行后续的操作

<body>

     <div><div>klkx1<div>klkx2</div></div></div>

    <script>

        var oDiv = document.getElementsByTagName('div')[0];

        var s1 = oDiv.childNodes[0].cloneNode(true);

        console.log(s1.childNodes.length);//

        var s2 = oDiv.childNodes[0].cloneNode(false);

        console.log(s2.childNodes.length);//

    </script>

 </body>

normalize() 函数作用处理文档树中的文本节点

10.1.2Document类型

在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面

document对象也是window对象的一个属性

document不用使用，appendChild()、removeChild()、replaceChild()方法

因为文档类型是只读的而且它只能有一个元素子节点

2、文档信息

document对象包含title属性，可以更改title的标题内容

document.URL 　　取得完整的url

document.domain　　取得域名　　//只有domain是可以设置的

document.referrer　　取得来源页面的URL

没明白的地方

3、查找元素

dom的一些方法：

getElementById('')　　　　如果有多个相同的ID只返回文档中第一次出现的元素(IE7以下返回null,IE8不区分ID大小写)

IE7以下name特性与给定的ID如果相同，则name也会被返回，所以尽量避免Id和name名字一样

getElementsByTagName();　　返回该元素子集中相同的标签包括零或多个元素的集合NodeList动态集合

可以使用[]和item()方法访问集合对象中的元素，

集合对象还有一个方法:namedItem(),使用这个方法可以通过元素的name特性取得集合中的项,每一个浏览器的表现不一样，返回值不一样

namedItem()实例：

<body>

    <ul>

        <li name='klkx'>1</li>

        <li name='klkx1'>2</li>

        <li name='klkx'>3</li>

        <li name='klkx3'>4</li>

    </ul>

    <script>

        var oUl = document.getElementsByTagName('ul')[0];

        var aLi = oUl.getElementsByTagName('li');

        /*

            集合对象.namedItem('名字');

            只返回第一个name属性匹配正确的对象

        */

        console.log(aLi.namedItem('klkx') === aLi[0]);//true

    </script>

 </body>

document有一个forms属性，返回form标签的HtmlCollection对象集合

document.forms　　表单集合

document.images　　图片集合

document.links　　链接结合

返回HTMLCollection 支持按名称访问项

document.forms['name'或者数字]

document.images['name'或者数字]　　

document.links['name'或者数字]

如果是数字后台会自动调用item()函数，参数为数字

如果是字符串后台会调用namedItem()函数，参数为字符串

如果想要取得文档中的所有元素，可以啊传入‘*’通配符。返回的集合会按照元素出现的顺序进行排列；

传入的参数，最好区分大小写

getElementsByName()　　这个方法只有HTMLDocument类型才有此方法，这个方法返回带有给定name特性的所有元素

最常用的getElementsByName()方法的情况是取得单选按钮，为了确保所发送给浏览器的值正确无误，所有单选按钮必须有相同的name特性

4、特殊集合

document.anchors　　包含所有带name特性的<a>元素结合

document.applets　　包含文档中所有的<applet>元素(不再使用)

documents.forms　　包含所有的<forms>元素的集合

document.images　　包含所有<img>元素集合

5、DOM一致性检测

var hasXmlDom = document.implementation.hasFeature('XML','1.0');

6、文档写入

document对象的功能，输出流写入到网页中，接受一个字符串参数。

write()　　　　会原样输出

writeln()　　　会在原样的基础上加上一个\n

open()　　　　打开网页的输出流　

close()　　　　关闭网页的输出流

如果页面用到write(),则open和close就不需要使用，在严格模式下，不支持文档写入。

实例：

当在document的<script>内写入标签时：

　　<script>

        document.write("<script src='xxx.js'>"+"<\/script>");

    </script>

如果字符串</script>被直接写入会出现错误，他会和前边的<script>直接匹配出现错误；

所以要在斜杠前边插入一个\反斜杠转义一下

document.write()在页面输出内容，但是如果在整个页面输入完内容以后，在写入会重写整个页面

DOM10-1节点层次的更多相关文章

JS基础DOM篇之二：ＤＯＭ级别与节点层次？
通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...
JavaScript之Dom1|DOM2|DOM3之DOM1【节点层次】
长文慎读. 导航: 1.节点层次 2.Node类型 3.Document类型 4.Element类型 5.Text类型 6.Comment类型 7.CDATASection类型 8.DocumentT ...
javascript DOM中的节点层次和节点类型概述
针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...
《JAVASCRIPT高级程序设计》节点层次和DOM操作技术
DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有 ...
poj 1330 【最近公共祖先问题+fa[]数组+ 节点层次搜索标记】
题目地址:http://poj.org/problem?id=1330 Sample Input 2 16 1 14 8 5 10 16 5 9 4 6 8 4 4 10 1 13 6 15 10 1 ...
DOM之节点层次
1.1 Node类型 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JS中是作为Node类型实现的:除了IE之外,其他浏览器可访问这个类型.JS中的所有节点 ...
DOM_节点层次_Element类型
一.Element类型: nodeType: 1; nodeName: 元素名; nodeValue: null; parentValue: Document 或者 Element; var oDiv ...
DOM_节点层次
一.DOM1级定义了一个Node接口,这个接口是由DOM中的所有节点类型实现的.Node接口共有12种节点类型,常见的是元素节点.文本节点和文档节点. Node.ELEMENT_NODE(1);——元 ...
JavaScript中DOM节点层次Text类型
文本节点标签之间只要有一点内容都会有文本节点,包括空格创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

随机推荐

cherry-pick 命令
拣选会提取某次提交的补丁,之后尝试将其重新应用到当前分支上. 这种方式在你只想引入特性分支中的某个提交时很有用. 假设你的项目提交历史如下: 如果你希望将提交 e43a6 拉取到 master 分支, ...
centos 命令学习
关机&重启 shutdown -h 10 #计算机将于10分钟后关闭,且会显示在登录用户的当前屏幕中 shutdown -h now #计算机会立刻关机 shut ...
Error starting daemon: error initializing graphdriver: driver not supported
Error starting daemon: error initializing graphdriver: driver not supported systemctl stop docker rm ...
优化myeclipse启动速度以及解决内存不足问题
解决myeclipse内存不足问题: 使用 MyEclipse 开发项目后,随着项目文件的增多,以及运行时间的增加,实际上 MyEclipse 所消耗的内存是会一直增大的,有的时候会出现 MyEcli ...
andorid UI事件监听器
gridlayout.xml <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns ...
iOS 3D Touch功能
新的触摸体验——iOS9的3D Touch 一.引言在iphone6s问世之后,很多果粉都争先要体验3D Touch给用户带来的额外维度上的交互,这个设计之所以叫做3D Touch,其原理上是增加了 ...
性能监控工具——Cacti安装文档
一.Cacti安装说明 1.安装说明一般性的安装说明,详细的操作系统具体的安装说明可用于Linux. 2.服务器安装要求 RRDTool 1.2.x或更高版本 MySQL 4.1.x或5.x更高版本 ...
db2创建数据库
1.在实例用户用户下执行 db2 create database <DBName> on /home/db2inst1/<DBName> using codeset UTF ...
c sharp dll
1. generate dll building .cs file, for example: myDll.cs using System; using System.Collections.Gene ...
Ubutun 配置php redis 扩展
1.安装redis 下载:wget --no-check-certificate https://github.com/nicolasff/phpredis/archive/2.2.4.tar.gz ...

DOM10-1节点层次

DOM10-1节点层次的更多相关文章

随机推荐

热门专题