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时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

随机推荐

ES6 Promise 全面总结
转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...
(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明
我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的. 但有时 ...
sass基础—属性嵌套以及跳出嵌套 @at-root
/*注意:定义的变量若是没有使用则不会编译到css文件中.*//*1)sass的局部变量*/$font:14px;//定义$font:12px !default; //没有default时是重新赋值, ...
easyUI-datagrid带有工具栏和分页器的数据网格
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数据 ...
python操作注册表
#注册表操作 # -*- coding: utf-8 -*- import win32api import win32con #打开注册表:传主键化值,子键值,操作方法(win32con.KEY_AL ...
js 打开摄像头方法（定制摄像头）
var video = document.getElementById("video");if (navigator.mediaDevices && navigat ...
servlet在地址栏填写参数
单个参数:以"?"开头+参数名+"="符号+参数值例如 https://i.cnblogs.com/EditPosts.aspx?opt=1 多个参数:以&q ...
MyBatis-Plus工具快速入门
MyBatis-Plus官方文档:http://mp.baomidou.com/#/quick-starthttp://mp.baomidou.com/guide/#%E7%89%B9%E6%80%A ...
zookeeper都有哪些使用场景
分布式协调这个其实是zk很经典的一个用法,比如,A系统发送个请求到mq,然后B拿到消息消费之后处理了.那A系统如何知道B系统的处理结果? 用zk就可以实现分布式系统之间的协调工作.A系统发送请求之后 ...
Hadoop Shell命令（基于linux操作系统上传下载文件到hdfs文件系统基本命令学习）
Apache-->hadoop的官网文档命令学习:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html FS Shell 调用文件系统( ...

JavaScript基础笔记（七）DOM

DOM