JavaScript学习笔记7 之DOM文档对象模型
一、什么是DOM
Document Object Model
文档 -------对象 ----模型-------缩写DOM
DOM是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM树中的所有节点均可通过JS进行访问。所有HTML元素（节点）均可被修改、创建或删除。
二、节点类型
1、节点类型
HTML 文档中的所有内容都是节点(node)：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点(回车也是文本节点)
每个 HTML的属性是属性节点 getAttributeNode("id")
注释是注释节点
各节点获取的代码：
2、nodeName 属性返回节点的名称
元素节点的 nodeName 是标签名称 ( 大写 )
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释节点的 nodeName 永远是 #comment
3、nodeValue 属性返回节点的值
对于元素节点，nodeValue 返回值是undefined 或 null
对于文本节点，nodeValue 返回文本内容
对于属性节点，nodeValue 返回属性值
对于注释节点，nodeValue 返回注释内容
对于元素节点，用innerHTML设置值 / 获取值
4、nodeType 属性返回一个整数，这个数值代表节点的类型
常用的节点类型是：
元素节点 返回 1 属性节点 返回 2 文本节点 返回 3
注释节点 返回 8 文档节点 返回 9
<body>
<div id="box1">aaa<span>标签11</span></div>
<div id="box2"><!-- 注释abc -->bbb<span>标签22</span></div>
<script>
/*节点的获取*/
var box1=document.getElementById('box1');//元素节点
var box2=document.getElementById('box2');//元素节点
var attr=box1.getAttributeNode('id');//注释节点
var txt=box1.firstChild;//文本节点
var comme=box2.firstChild;//注释节点
var doc=document;//文档节点 /*nodeName 属性返回节点的名称*/
console.log(box1.nodeName);//DIV(标签名称)---元素节点
console.log(box2.nodeName);//DIV(标签名称)---元素节点
console.log(attr.nodeName);//id(属性名称)---属性节点
console.log(txt.nodeName);//#text---文本节点nodeName永远是#text
console.log(comme.nodeName);//#comment---注释节点的nodeName永远是 #comment
console.log(doc.nodeName);//#document---文档节点的nodeName永远是 #document /*nodeValue 属性返回节点的值*/
console.log(box1.nodeValue);//null---元素节点返回值为undefined 或 null
console.log(box1.innerHTML);//aaa<span>标签11</span>对于元素节点，用innerHTML设置值/获取值
console.log(box1.innerText);//aaa标签11
console.log(box2.nodeValue);//null
console.log(attr.nodeValue);//box1
console.log(txt.nodeValue);//aaa
console.log(comme.nodeValue);//注释abc
console.log(doc.nodeValue);//null /*nodeType 属性返回一个整数，这个数值代表节点的类型*/
console.log(box1.nodeType);//1--元素节点
console.log(box2.nodeType);//1--元素节点
console.log(attr.nodeType);//2--属性节点
console.log(txt.nodeType);//3--文本节点
console.log(comme.nodeType);//8--注释节点
console.log(doc.nodeType);//9--文档节点
</script>
</body>
三、节点关系
childNodes：所有子节点//IE6、7、8支持，其他“不支持”，弃之
nextSibling：下一个兄弟节点//IE6、7、8支持
nextElementSibling://其他支持
previousSibling：上一个兄弟节点
firstChild : 第一个子节点
lastChild：最后一个子节点
children：所有是标签类型的子节点//没毛病，都支持，可直接用
parentNode：父节点
<body>
<div id="box">
<ul id="list1">
<li>11first<span>aa</span></li>
<li>22<span>bb</span></li>
<li>33new<span>cc</span></li>
<li>44last<span>dd</span></li>
</ul>
<ul id="list2"><li>11<span>aa</span></li><li>22<span>bb</span></li><li>33<span>cc</span></li></ul>
</div>
<script>
var list1=document.getElementById('list1');
var lis2=list1.getElementsByTagName('li')[1];
var list2=document.getElementById('list2');
var lis22=list2.getElementsByTagName('li')[1];
/*1、childNodes：所有子节点*/
/*若按照list1方式缩进写的话，IE6、7、8支持，其他“不支持”
若按照list2方式不缩进写的话，都支持
但一般都按list1的缩进方式写，故弃之*/
var nodes1=list1.childNodes;
var nodes2=list2.childNodes;
alert(nodes1.length);//9(4个元素节点(li)+5个文本节点(回车))
alert(nodes2.length);//3(三个元素节点) /*2、nextSibling：下一个兄弟节点*///IE6、7、8支持
var li31=lis2.nextSibling;//IE6、7、8支持,其他不支持
var li32=lis2.nextElementSibling;//其他支持，IE6、7、8不支持
alert(li31.innerHTML);//undefined
alert(li32.innerHTML);//33<span>cc</span>
//为获取下一个兄弟节点封装函数
function nextNode(obj){
if (obj.nextElementSibling) {
return obj.nextElementSibling;//其他支持
} else {
return obj.nextSibling;//IE6、7、8支持
}
}
var li3=nextNode(lis2);
alert(li3.innerHTML);//33new<span>cc</span> /*3、previousSibling：上一个兄弟节点*/
function previousNode(obj){//为获取上一个兄弟节点封装函数
if (obj.previousElementSibling) {
return obj.previousElementSibling;//其他支持
} else {
return obj.previousSibling;//IE6、7、8支持
}
}
var li1=previousNode(lis2);
alert(li1.innerHTML);//11first<span>aa</span> /*4、firstChild : 第一个子节点*/
function firstChild(obj){
if (obj.firstElementChild) {
return obj.firstElementChild;//其他支持
} else {
return obj.firstChild;//IE6、7、8支持
}
}
var list1child1=firstChild(list1);
alert(list1child1.innerHTML);//11first<span>aa</span> /*5、lastChild：最后一个子节点*/
function lastChild(obj){
if (obj.lastElementChild) {
return obj.lastElementChild;//其他支持
} else {
return obj.lastChild;//IE6、7、8支持
}
}
var list1child4=lastChild(list1);
alert(list1child4.innerHTML);//44last<span>dd</span>
/*6、children：所有是标签类型的子节点*/
lis=list1.children;//都支持，可以直接使用
alert(lis.length);//
alert(lis[0].innerHTML);//11first<span>aa</span>
/*7、parentNode：父节点*///都支持，可以直接使用
alert(lis[0].parentNode.parentNode.id);//box
</script>
</body>
四、常见操作节点方法
1、查找方法：
document.getElementById('');
document.getElementsByTagName('');
2、复制节点：
cloneNode(boolean) : 复制一个节点
true：深复制，复制节点及其整个子节点树
false : 浅复制，只复制节点本身。
注意：cloneNode（）方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等。
深复制与浅复制对比：
<body>
<div id="box1">
<h1>深复制与浅复制</h1>
<p>深复制，复制节点及其整个子节点树，浅复制，只复制节点本身</p>
</div>
<script>
var box1=document.getElementById('box1');
var box2=box1.cloneNode(true);//深复制
var box22=box1.cloneNode(false);//浅复制
document.body.appendChild(box2);
document.body.appendChild(box22);
//将节点复制到body底部，甚至是js代码下面
</script>
</body>
3、操作节点：
createElement("标签名") : 创建新元素
createTextNode("") : 创建文本节点
创建方法：document.createElement('div');
appendChild(node) : 末尾插入一个节点node
insertBefore(node,targetNode) : target之前插入节点node
replaceChild(newNode,oldNode) : new替换节点old
removeChild(node) : 移除父节点的某个子节点
<body>
<ul id="list">
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<button id="btn">删除</button>
<script>
var list=document.getElementById('list');
var btn=document.getElementById('btn');
var lis=list.children;
/*createElement("标签名") : 创建新元素*/
var newLi1=document.createElement('li');//start、创建元素
var newLi2=document.createElement('li');//start、创建元素
/*把文本节点插入新建节点中--方法一*/
//2、创建文本节点
var txtnode=document.createTextNode('我是createTextNode创建的11');
newLi1.appendChild(txtnode);//3、newLi末尾插入一个文本节点txtnode
list.appendChild(newLi1);//end、list末尾插入一个节点newLi
/*把文本节点插入新建节点中--方法二*/
newLi2.innerHTML='我是innerHTML创建的22';//2、newLi文本中写入文本
list.appendChild(newLi2);//end、list末尾插入一个节点newLi /*insertBefore(node,targetNode) : target之前插入节点node*/
list.insertBefore(newLi1,lis[2]);
/*replaceChild(newNode,oldNode) : new替换节点old*/
list.replaceChild(newLi2,lis[1]);
/*removeChild(node) : 移除父节点的某个子节点*/
btn.onclick=function (){
list.removeChild(lis[1]);
}
</script>
</body>
五、属性常见操作方法
获取节点上name属性的值
getAttribute("name")
获取节点上type属性
getAttributeNode("type")
设置节点上name属性的值为value
setAttribute("name","value")
删除节点上的name属性
removeAttribute("name")
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
*{margin:0; padding:0; list-style:none;}
.red{
background: red;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div id="box11" abc="0" class="red">1111</div>
<div id="box22" abc="1">2222</div>
<button id="btn">删除</button>
<script>
var box1=document.getElementById('box11');
var box2=document.getElementById('box22');
var btn=document.getElementById('btn');
alert(box1.getAttribute('id'));//box11
//1、获取节点上id属性的值
alert(box1.id);///box11--->常用在获取内置属性
alert(box1.getAttribute('abc'));//0-->常用在获取自定义属性
//2、设置节点上class属性的值为blue
box2.setAttribute('class','blue');
//3、删除属性class
btn.onclick=function (){
box1.removeAttribute('class');
}
</script>
</body>
六、练习
微博发布效果：
点 '发布' 消息显示出来，点 '删除' 则消息删除
JavaScript学习笔记7 之DOM文档对象模型的更多相关文章
- SpringBoot学习笔记：Swagger实现文档管理
SpringBoot学习笔记:Swagger实现文档管理 Swagger Swagger是一个规范且完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务.Swagger的目标是对RE ...
- 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...
- JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- xml.dom——文档对象模型API
文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...
- JavaScript学习总结（一）DOM文档对象模型
一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...
- 《DOM Scripting》学习笔记-——第八章 充实文档的内容
本章内容 一.一个为文档创建“缩略词语表”的函数 二.一个为文档创建“文献来源链接”的函数 三.一个为文档创建“快速访问键清单”的函数 利用DOM动态的收集和创建一些有用的辅助信息,并把它们呈现在网页 ...
随机推荐
- 【Win 10 应用开发】打印UI元素
Windows App支持将UI界面进行打印的功能,这与浏览器中的打印网页的用途相近,其好处就是“所见即所得”,直接把界面上呈现的内容打印下来,比重新创建打印图像方便得多. 要在通用App中实现打印, ...
- bootstrap-modal 学习笔记 源码分析
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢 ...
- android的logcat详细用法
Android日志系统提供了记录和查看系统调试信息的功能.日志都是从各种软件和一些系统的缓冲区中记录下来的,缓冲区可以通过 logcat 命 令来查看和使用. 使用logcat命令 你可以用 logc ...
- 窥探Swift编程之在Playground上尽情的玩耍
自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground".Playground就像操场一样,可以供我们在代码的世界里尽情的玩耍,在本篇博客中就 ...
- 设计数据库字段或者java中使用boolean型时需谨慎
boolean型变量只有两个值 false和true,我们在设计数据库字段时或者定义java变量时会使用boolean,通常情况下开关类的变量使用无可非议,但请一定要考虑到扩展性. 使用前请仔细考虑一 ...
- Oracle数据库全球化
一.自定义数据库和各个会话的语言相关行为 1.1 全球化功能 1.2 使用全球化支持功能 二.使用数据库和NLS字符集 2.1 语言排序与选择 2.2 Locale Builder 2.3 使用时区 ...
- hibernate笔记--实体类映射文件"*.hbm.xml"详解
实体类就是指普通的POJO,Hibernate并不知道那个实体类对应数据库的哪一张表,所以还需要配置一下,常用的方式就是*.hbm.xml文件[配置与@注解配置,这里介绍前者的详细属性: <?x ...
- 【JUC】JDK1.8源码分析之ConcurrentSkipListSet（八）
一.前言 分析完了CopyOnWriteArraySet后,继续分析Set集合在JUC框架下的另一个集合,ConcurrentSkipListSet,ConcurrentSkipListSet一个基于 ...
- 代码的坏味道（2）——过大的类(Large Class)
坏味道--过大的类(Large Class) 特征 一个类含有过多字段.函数.代码行. 问题原因 类通常一开始很小,但是随着程序的增长而逐渐膨胀. 类似于过长函数,程序员通常觉得在一个现存类中添加新特 ...
- SQL Server中smalldatetime的日期范围为何是[1900-01-01,2079-06-06]
本文目录列表: 1.SQL Server中的基准日期 2.smalldatetime的日期范围 3.smalldatetime的日期范围和无符号2字节整数的关系 4.总结语 5.参考清单列表 SQ ...