DOM

DOM可以将任何HTML或者XML文档描述成一个由多层节点构成的结构。

一、节点层次

一）Node类型

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

每一个节点都有一个nodeType属性，用于表明节点类型。节点类型由在Node类型中定义的12个数值常量来表示。

 Node.ELEMENT_NODE(1)；
 Node.ATTRIBUTE_NODE(2)；
 Node.TEXT_NODE(3)；
 Node.CDATA_SECTION_NODE(4)；
 Node.ENTITY_REFERENCE_NODE(5)；
 Node.ENTITY_NODE(6)；
 Node.PROCESSING_INSTRUCTION_NODE(7)；
 Node.COMMENT_NODE(8)；

 Node.DOCUMENT_NODE(9)；
 Node.DOCUMENT_TYPE_NODE(10)；
 Node.DOCUMENT_FRAGMENT_NODE(11)；
 Node.NOTATION_NODE(12)。

<body>

    <input id="king" value="for the king!"/>

</body>

<script>

    window.onload = function () {

        var h = document.getElementById("king");

        //方法一，在IE浏览器中不管用

        if (h.nodeType == Node.ELEMENT_NODE) {

            console.log("This is a element.");

        }

        //方法二，适用于所有浏览器

        if (h.nodeType == 1) {

            console.log("It's a element");

            console.log("The node name is "+h.nodeName);   //"INPUT"即为元素的标签名

            console.log("The node value is "+h.nodeValue); //对于元素节点始终是null

        }

    }

</script>

1.节点关系

每一个节点都有一个childNodes属性，其中保存着一个NodeList类数组对象（注意该对象是动态的随着DOM变化而变化），

<body>

    <div id="father">

        <p>This is a p</p>

        <h5>A HTML5?</h5><br>

        <input value="just a input">

    </div>

</body>

<script>

    var d = document.getElementById("father");

    if (d.nodeType == 1) {

        console.log("The length of the children is "+ d.childNodes.length);  //

        console.log("The first children is "+ d.childNodes[0].nodeName); //"#text"

        console.log("The second children node is "+ d.childNodes[1].nodeName); //"p"

    }

</script>

parentNode属性：指向父节点

previousSilbling属性；前一个同胞节点

nextSilbling属性：后一个同胞节点

ownerDocument属性：指向表示整个文档的文档节点。

2.操作节点

1.appendChild():向childNodes列表末尾添加一个节点，返回添加的节点，如果该节点在文档中存在，移动之。

2.insertBefore(newNode,oldNode):把节点放在childNodes列表指定位置,如果参照节点为null，则添加到末尾。

3.replaceChild(new,old)：替换childNodes列表中的节点。

4.removeChild():

5.cloneNode(boolean):true为深复制，连同子节点一起复制，false为浅复制只复制该节点。注意该方法不会复制

添加到DOM节点中的JS属性，如事件处理程序等。

<body>

    <h2 id="bother">Apple Orange</h2>

    <div id="father">

        <p>This is a p</p>

        <h5>A HTML5?</h5><br>

        <input value="just a input">

    </div>

</body>

<script>

    var h = document.getElementById("bother");

    var d = document.getElementById("father");

    var h2 = h.cloneNode(true);

    d.appendChild(h2);

    console.log(d.lastChild.nodeName); //H2

</script>

二）Document类型

在浏览器中，document对象是HTMLDocument对象（继承自Document对象）的一个实例，表示整个HTML页面，并且document对象是window对象的一个属性。

1.文档的子节点

1）document.documentElement:该属性指向<html>元素

2）document.body:指向<body>元素

3）document.doctype:浏览器差别很大，不常用。

2.文档信息

1）document.title:指向<title>元素的文本，可修改

2）document.URL：完整的URL信息

3）document.domain:只包含页面的域名，可设置

4）document.reference:包含来源页面的URL

当页面中包含来自其他子域的框架或内嵌框架时，能够设置 document.domain 就非常方便了。由
于跨域安全限制，来自不同子域的页面无法通过 JavaScript 通信。而通过将每个页面的
document.domain 设置为相同的值，这些页面就可以互相访问对方包含的 JavaScript 对象了

浏览器对 domain 属性还有一个限制，即如果域名一开始是“松散的”（loose），那么不能将它再设
置为“紧绷的”（tight）。换句话说，在将 document.domain 设置为"wrox.com"之后，就不能再将其
设置回"p2p.wrox.com"，否则将会导致错误

3.查找元素

1）document.getElementById(id):如果多个id相同，只返回第一个

2）document.getElementsByTagName(name)：为了兼容，标签名不区分大小写，在HTML文档中返回一个HTMLCollection对象，

该对象有一个nameItem(name)方法，使用这个方法可以通过元素的name属性获得元素。注意，元素也有该方法，即element.getElementsByTagName()

3）document.getElementsByName(name):HTMLDocument才有的方法。

4.文档的写入

1）document.write(str):页面被加载的过程中动态地写入内容

2）document.writeln(str):与1）不同的是末尾加上了换行符

使用上面两个方法可以动态地包含文件资源。

如果在文档加载完成后调用上述两个方法，页面将会被重写：

<body>

    <p>Things you never see!</p>

    <script>

        //由于用了window.onload延迟执行函数，<p>元素中的文本会被重写。

        window.onload = function () {

            document.write("<h2>Now the time is " + new Date().toLocaleDateString()+ "</h2>");

        }

    </script>

</body>

三）Element类型

Element用以表现HTML或XML中的元素。

要访问标签名，可以使用nodeName或者tagName。

var div = document.getElementById("myDiv");

alert(div.tagName); //"DIV"

alert(div.tagName == div.nodeName); //true

if (element.tagName.toLowerCase() == "div"){ //这样最好（适用于任何文档）

//在此执行某些操作

}

1.HTML元素

所有的HTML元素都由HTMLElement类型及其子类表示，该类型继承自Element类型，并添加了如下属性：

 id，元素在文档中的唯一标识符。
 title，有关元素的附加说明信息，一般通过工具提示条显示出来。
 lang，元素内容的语言代码，很少使用。
 dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），
也很少使用。
 className，与元素的 class 特性对应，即为元素指定的 CSS 类。没有将这个属性命名为 class，
是因为 class 是 ECMAScript 的保留字

var div = document.getElementById("myDiv");

alert(div.id); //"myDiv""

alert(div.className); //"bd"

alert(div.title); //"Body text"

alert(div.lang); //"en"

alert(div.dir); //"ltr"

div.id = "someOtherId";

div.className = "ft";

div.title = "Some other text";

div.lang = "fr";

div.dir ="rtl";

4.特性

1）element.getAttribute(attrName):取得元素属性，包括自定义属性。

注意任何元素的所有非自定义属性，都可以通过element.atrribute这中形式来访问。

但style属性通过getAttribute()返回的是CSS文本，通过element.style则返回一个对象。

对于事件处理程序，如onclick特性通过getAttribute()返回的是字符串文本，element.onclick返回的是一个函数。

2）element.setAttribute(name,value):设置元素属性，该属性名会被转换为小写形式。

3）element.removeAttribute(name):移除属性。

5.创建元素

document.createElement(tagName):标签名不区分大小写。

四）Text类型

文本节点由Text类型表示，可以通过nodeValue或者data属性访问Text类型中的值，length属性保存字符串长度。

 appendData(text)：将 text 添加到节点的末尾。
 deleteData(offset, count)：从 offset 指定的位置开始删除 count 个字符。
 insertData(offset, text)：在 offset 指定的位置插入 text。
 replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset+
count 为止处的文本。
 splitText(offset)：从 offset 指定的位置将当前文本节点分成两个文本节点。
 substringData(offset, count)：提取从 offset 指定的位置开始到 offset+count 为止
处的字符串

<!-- 没有内容，也就没有文本节点 -->

<div></div>

<!-- 有空格，因而有一个文本节点 -->

<div> </div>

<!-- 有内容，因而有一个文本节点 -->

<div>Hello World!</div>

1.创建文本节点

document.createTextNode(content):创建一个文本节点

<body>

    <script>

        var d = document.createElement("div");

        var t = document.createTextNode("Hello world");

        d.appendChild(t);

        document.body.appendChild(d);

    </script>

</body>

2.合并文本节点

如果我们在一个元素上使用多次appendChild()方法追加文本节点，就有可能存在多个文本节点。

此时，我们可以使用Node类型的normalize()方法合并文本节点。element.normalize()

3.分割文本节点

Text类型的spliteText(offset)方法可以分割文本节点

五）Comment类型

注释在DOM中是通过Comment类型表示的，该类型与Text类型继承自相同的基类，

因此它有除了spliteText()方法外所有的字符串操作方法。也可以通过data和nodeValue访问值。

document.createComment(content)创建注释节点

六）Attr类型

元素的特性在DOM中庸Attr类型表示。注意：尽管特性是节点，但它们并不被认为是DOM文档树的一部分。

document.createAttribute(name)

JavaScript基础笔记（七）DOM的更多相关文章

JavaScript基础笔记一
一.真假判断真的:true.非零数字.非空字符串.非空对象假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...
JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在&l ...
JavaScript基础笔记二
一.函数返回值1.什么是函数返回值函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值二.可变 ...
JavaScript 基础第七天（DOM的开始）
一.引言 JavaScript的内容分为三个部分,这三个部分分别是ECMAScript.DOM.BOM三个部分组成.所谓ECMAScript就是JavaScript和核心基础语法,DOM是文档对象模型 ...
JavaScript基础笔记（八）DOM扩展
DOM扩展一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...
Android路径之Javascript基础-笔记
一.Javascript概述(知道) a.一种基于对象和事件驱动的脚本语言 b.作用: 给页面添加动态效果 c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAscipt. d.特 ...
JavaScript基础笔记（十）表单脚本
表单脚本一.表单基础知识 JavaScript中表单对应的是HTMLFormElement类型,该类型继承自HTMLElement类型. 通过document.forms可以获得所有表单元素,通过数 ...
JavaScript基础笔记（一）基本概念
基本概念一.语法一)区分大小写二)标识符书写规则同Java 三)注释略四)严格模式 1.在整个脚本中启用严格模式:在顶部添加 "use strict" 2.指定函数在严 ...
javascript基础学习--HTML DOM
写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

随机推荐

C++ GetUserName()
关于函数“GetUserName()”,参见:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724432(v=vs.85).as ...
MySQL5.7.20报错Access denied for user 'root'@'localhost' (using password: NO)
在centos6.8上源码安装了MySQL5.7.20,进入mysql的时候报错如下: 解决办法如下: 在mysql的配置文件内加入: vim /etc/my.cnf skip-grant-tabl ...
总结Java虚拟机内存区域模型
本篇文章主要来总结一下Java虚拟机内存的各个区域,以及这些区域的作用.服务对象以及其中可能产生的问题,作为大家的面试宝典. 首先我们来看一下Java运行时的数据区域,Java虚拟机在执行Java程序 ...
windows下使用Play框架
play类似于Spring这里的web框架.特点:MVC.函数编程. 版本:play 2.1.3 一.play命令 #play ~compile 功能:持续编译.在cmd中运行这个命令,只要 ...
requests禁止重定向
response = requests.get( 'http://weixin.sogou.com/weixin?query=%E9%A3%8E%E6%99%AF&type=2&pag ...
Linux下查看80端口是否被占用
方式一: ps -ef |grep 80 方式二: netstat -anp |grep :80 方式三: lsof -i:80 方式四: netstat -tunlp |grep :80 方式五: ...
[转] AES,SHA1,DES,RSA,MD5区别
AES:更快,兼容设备,安全级别高: SHA1:公钥后处理回传 DES:本地数据,安全级别低 RSA:非对称加密,有公钥和私钥 MD5:防篡改相关: 公开密钥加密(英语:public-key cry ...
Redis-Sentinel 哨兵
为什么需要哨兵? 一旦主节点宕机,那么需要人为修改所有应用方的主节点地址(改为新的master地址),还需要命令所有从节点复制新的主节点那么这个问题,redis-sentinel就可以解决了什么是 ...
[转]Ubuntu默认使用root用户登录并免去输入密码
启用Root用户登录 Ctrl + Alt + T进入终端, 输入cd /usr/share/lightm/ightm.conf.d, 如果提示你没有那个文件或目录.那就一次次的进入目录. 进入之后会 ...
C# 之提高WebService性能大数据量网络传输处理
1.直接返回DataSet对象特点:通常组件化的处理机制,不加任何修饰及处理: 优点:代码精减.易于处理,小数据量处理较快: 缺点:大数据量的传递处理慢,消耗网络资源: 建议:当应用系统在内网.专网 ...

JavaScript基础笔记（七）DOM

DOM