7. JavaScript学习笔记——DOM
7. DOM
7.1 DOM简介
DOM是文档对象模型，HTML文档的所有内容都是节点：
整个文档是一个文档节点 (document 最顶级)
HTML元素内的文本是文本节点
每个表面的属性是属性节点
注释是注释节点
HTML DOM将HTML文档视作树结构，这种结构被称为节点树。
文档 document根元素 html元素 head元素 body元素 title文本节点元素 a属性节点 href节点父、子、同胞：
在节点树中，顶端节点称为根(root)
除了根每个节点都有父节点
一个节点可以拥有任意数量的子节点
同胞是拥有相同父节点的节点
Node 类型：
JS中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点类型。节点类型由Node类型中定义的下列常量表示。
Node.ELEMENT_NODE == 1 //元素
Node.ATTRIBUTE_NODE == 2 //属性
Node.TEXT_NODE == 3 //文本
Node.ENTITY_NODE == 6 //实体
Node.DOCUMENT_NODE == 9 //文档
if(xxx.nodeType === Node.ELEMENT_NODE){alert(1)};·
Document 类型：
Document表示整个文档，Document对象是window对象的一个属性，所以可以当做全局对象访问。
特征：
nodeType=9；nodeName='#document'；nodeValue=null；parentNode=null文档的子节点：
document.documentELement该属性始终指向HTML页面的<html>元素，取得对<html>的引用document.body//取得对<body>的引用，使用频率很高document.head选取 <head> 元素
文档信息：
var title = document.tilte; //取得文档标题document.tilte = 'xxx';//修改文档标题document.URL; //取得当前页面完整URLdocument.domain;//获得域名 URL和referrer都不可以赋值，而domain可以赋值，domain只能赋值为同网站的document.referrer;//获得来源页面的URL
文档写入：
write('string'); writeln('string'); //区别是writeln会在字符串末尾加\\n可以动态地加载外部资源，例如JavaScript(无法自动执行代码)，但是要注意：
</script>要写成这样<\/script>，因为不转义的话，会被当成标签结束，后面的代码将无法执行。
Element 类型：
Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特性的访问
Text 类型：
文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML 字符，但不能包含 HTML 代码。 即：HTML字符会被转义成实体
nodeType 的值为 3； nodeName 的值为"#text"； nodeValue 的值为节点所包含的文本； parentNode 是一个 Element； 不支持（没有）子节点。
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 为止处的字符串。除了这些方法之外，文本节点还有一个 length 属性，保存着节点中字符的数目。
7.2 选取元素
【注意】：DOM操作必须等待HTML文档加载完毕才可以获取，可以用window.onload=function(){};或把<script>标签移到最后解决
///【通过ID选取】
var div = document.getELementById('id');//返回带有【一个】指定ID的元素节点对象(PS:一个页面只允许一个id，表示唯一性)
alert(div); //Object HTMLDivElement
alert(div.tagName); //获取这个元素节点的标签名
//当想要通过ID查找多个元素时，下面呢的getElements()函数很有用：
function getElements(/*ids...*/){ //接收任意多个字符串参数(id)
var elements = {}; //用于保存元素对象的空map映射对象
for(var i = 0; i < arguments.length; i++){ //遍历每个id
var id = arguments[i];
var elt = document.getElementById(id);
if(elt == null)
throw new Error("No element with id: " + id); //如果id不存在，抛出异常，退出
elements[id] = elt; //保存idd和元素之间的映射
}
return elements;
}
///【通过name选取元素】
// name属性用于向服务器提交数据，不唯一，多个元素可能具有同一个name；在表单中，单选、复选框通常是这种情况。和id不一样，name属性只在少数几个HTML元素中有效，包括：表单、表单元素、img、iframe
var h1 = document.getELementsByName('h1'); //返回 NodeList 对象，类似一个包含若干Element对象的只读数组
alert(h1.length); //获取长度
alert(h1[0]); //访问第一个h1
///【通过标签名选取】
var h1 = document.getELementsByTagName('h1'); //返回 NodeList 对象，对于标签名不区分大小写
// NodeList中返回的元素是按照在文档中的顺序排序的，所以可以用下面的代码选取文档中第一个p元素
var firstPara = document.getElementsByTagName("p")[0];
// 给 getELementsByTagName() 传递通配符参数 * ，将获得一个代表文档所有元素的 NodeList 对象
// Element 类也定义了 getElementsByTagName() 方法，原理和Document版本一样，只是它只选取调用该方法的元素的后代元素
///【通过 class 选取】
var cla1 = document.getELementsByClassName('cla1'); //选取 class 属性值中包含 cla1 的元素
var ab = document.getElementsByClassName('cla1 cla2'); //选取有 cla1 和 cla2 类的元素
//【根据CSS选择器查找】
document.querySelector('#nav'); //接收一个CSS选择器，返回子节点【第一个匹配到的元素】，没有返回null
div.querySelector('p');//上面是文档搜索，这个是在 div 下的子节点搜索
document.querySelectorAll('body');//返回所有符合的结果，NodeList
//***** DOM扩展 (不是HTML5规范，但都可以用) ******
//滚动
var p = document.getElementById('p');
p.scrollIntoView();//滚动到 ID 为p 的标签，类似于锚点
7.3 DOM节点
///【节点(node)属性】
alert(node.nodeName);//获取元素节点标签名，和tagName等价；属性节点名；文本节点是#text
alert(node.nodeType);//获取元素节点类型 1；属性节点类型 2；文本节点类型 3；
alert(node.nodeValue);//获取元素节点为null；获取属性节点的属性值；获取文本节点的文本内容
alert(node.innerHTML);//只能获取元素节点的文本内容(两个标签间的所有内容)，无法获取文本节点内容 a.href = 'http://test.cc'; //可以直接访问、修改元素的原生属性
alert(div.className); //通过className获取class属性的值，不用class，因为是保留字 // 【可以设置、读取 元素的非标准属性】
alert(div.getAttribute('xxx')); //获取自定义和自有的属性，可以用class
div.setAttribute('属性名','值'); //设置属性值
div.removeAttribute('属性名'); //删除属性名
div.hasAttribute('属性名'); //判断是否有某个属性，判断布尔值属性(disabled)很有用 //【数据集属性】
// 想要给HTML元素绑定额外的信息，可以用getAttribute() setAttribute()方法来读写非标准属性的值。HTML5 提供了一个解决方案，在HTML5 中任意以“data-”为前缀的小写属性都是合法的 数据集属性。
// HTML5在Element对象上定义了dataset属性，该属性指代一个对象，它的各个属性对应于去掉前缀的data-属性，如：dataset.xy 保存着 data-xy的属性的值；data-后的属性名如果有 - ，改成驼峰命名法 ///【层次节点属性】
// childNodes 属性
// <node>haha <b>xxx</b> end</node>
alert(node.childNodes);//返回 NodeList 对象，当前元素节点的所有子节点列表
alert(node.childNodes.length);//返回 NodeList 的长度，3
alert(node.childNodes[0]);//返回第一个子节点，文本节点(Object Text) haha
node.childNodes[0].nodeValue = '<b>xxx</b>';//可以赋值，标签会被转义成实体，innerHTML不会 //firstChild lastChild removeChild
alert(node.firstChild);//返回第一个子节点（文本和元素节点）
alert(node.lastChild.nodeValue);//返回最后一个子节点 end
node.removeChild(node[0])//移除子节点 //firstElementChild lastElementChild childElementCount
alert(node.firstElementChild);//返回第一个【元素节点】
alert(node.lastElementChild);//返回最后一个【元素节点】
alert(node.childElementCount);//返回元素节点数量 //parentNode previousSibling nextSibling
alert(node.parentNode);//返回父节点
alert(node.previousSibling);//返回本节点上一个节点（文本节点和元素节点）
alert(node.nextSibiling);//返回本节点的下一个节点 //nextElementSibling previousElementSibling parentNode
alert(node.nextElementSibling);//返回下一个【元素节点】 //attributes 属性
alert(node.attributes);//返回 object NamedNodeMap，这个元素节点的属性结合
alert(node.attributes.length);//返回属性集合长度
alert(node.attributes[0]);//返回一个属节点
alert(node.attributes['id']);//通过属性名访问
node.attributes['id']='test';//修改属性 //移除空白节点
//当两个标签里含有空格或换行符时会被当做空白的文本节点
function removeWhiteNodes(node){
for(var i=0; i<node.childNodes.length; i++){
if(node.childNodes[i].nodeType==3 && /^\s+$/.test(node.childNodes[i].nodeValue)){
node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
//childNodes[i].remove();
}
}
return node;
} //*****DOM扩展 (不是HTML5规范，但都可以用) *****
// children 属性 【解决空白节点的问题】
// 返回节点的所有子元素节点，只返回子节点中的元素节点
/*
<div id='div'>
111
<p>haha</p>
<p>enen</p>
222
</div>
*/
alert(document.getElementById('div').children.length);//2
alert(document.getElementById('div').children[0]);//返回第一个 p元素节点HTMLParagraphElement //contains()方法
//判断一个节点是不是另一个节点的子节点
alert(div.contains(p));//true
7.4 节点操作
//createElement createTextNode appendChild
var div = document.getElementById('div');
var p = document.createElement('p');//创建一个元素节点，没有添加到文档，只是驻留在内存里
var text = document.createTextNode('ppppp');//创建一个文本节点
p.appendChild(text);
div.appendChild(p);//将节点添加到子节点末尾 //insertBefore()
node.insertBefore(newItem[,existingItem]);//在node 的子节点existingItem前插入一个newItem
//JavaScript没有提供insertAfter
function insertAfter(newItem,targetItem){
var parent = targetItem.parentNode;
if(targetItem == parent.lastChild){
parent.appendChild(newItem);
}else{
parent.insertBefore(newItem,targetItem.nextSibling);
}
} //replaceChild removeChild cloneNode remove
node.replaceChild(newItem,oldItem);//替换子节点，【注意新节点在前】
node.removeChild(node[1])//移除子节点
var clone = node.cloneNode(true);//克隆一个节点，true表示包括所有子节点，false不包括
node.remove();//删除自身 //***** DOM扩展 - 插入 *****
/*
虽然 DOM 为操作节点提供了细致入微的控制手段，但在需要给文档插入大量新 HTML 标记的情况下，通过 DOM 操作仍然非常麻烦，因为不仅要创建一系列 DOM 节点，而且还要小心地按照正确的顺序把它们连接起来。相对而言，使用插入标记的技术，直接插入 HTML 字符串不仅更简单，速度也更快。以下与插入标记相关的 DOM 扩展已经纳入了 HTML5 规范。
*/ //innerHTML属性 (是HTML5规范)
//在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）字符串。在写模式下，innerHTML 会根据字符串创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
//插入 script 标签并不会执行里面的JS代码 //innerTEXT属性 (不是HTML5规范)
//返回子节点中所有文本节点的字符串，即去除所有标签
/*
<div>
aaa
<p>bbb</p>
haha
*/
alert(div.innerTEXT);//aaa bbb haha //outerHTML属性 (是HTML5规范)
//在读模式下， outerHTML 返回调用它的元素及所有子节点的 HTML 标签。 在写模式下， outerHTML会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素
//和innerHTML 类似，只不过操作包括了当前节点 //outerTEXT属性 （不是HTML5规范）
//同上，包括了当前节点
7.5 样式
7.5.1 访问元素的样式
任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。 这个 style 对象 是 CSSStyleDeclaration 的实例，包含着通过 HTML 的 style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。在 style 特性中指定的任何 CSS 属性都将表现为这个 style 对象的相应属性。对于使用短划线（分隔不同的词汇，例如 background-image）的 CSS 属性名，必须将其转换成驼峰大小写形式，才能通过 JavaScript 来访问。例如：
background-image ==> backgroundImage font-size ==> fontSize
//-----只要取得一个有效的 DOM 元素的引用，就可以随时使用 JavaScript 为其设置样式（但是float是JavaScript保留字，所以不能直接使用CSS属性float，改成cssFloat
//-----例如：
var div = document.getElementById('div');
div.style.backgroundColor = 'red';//设置背景颜色
div.style.width = '100px';
div.style.height = '200px';//改变大小
div.style.border = '1px solid black';//设置边框 //-----通过 style 对象同样可以取得在 style 特性中指定的样式，只能是获得行内的(style属性)
alert(div.style.backgroundColor);
alert(div.style.width); //-----【DOM 样式属性和方法】
//style 对象定义了一些属性和方法。这些属性和方法在提供元素的 style特性值的同时，【也可以修改样式】。
style.cssText //获得style属性的CSS代码
style.length //获得CSS属性的数量
styl.e.parentRule //CSS信息的CSSRule对象
style.getPropertyValue(属性名); //返回给定属性的字符串值
style.removeProperty(属性名); //从样式中删除指定属性
style.setProperty(属性名，值); //设置属性
style.item(index); //返回指定索引的CSS属性名 ///【操作样式表】
7.5.2 元素大小 和 位置
偏移量：
偏移量（offset dimension），包括元素在屏幕上占用的所有可见的空间。
这些属性每次访问都要重新计算，可以保存在局部变量中以提高性能
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft：元素的左外边框 至包含元素的左内边框之间的像素距离。offsetTop：元素的上外边框 至包含元素的上内边框之间的像素距离
客户区大小：
元素的客户区大小（client dimension），指的是元素内容及其内边距所占据的空间大小。
滚动大小：
滚动大小（scroll dimension），指的是包含滚动内容的元素的大小。
scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小。
7. JavaScript学习笔记——DOM的更多相关文章
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- html学习笔记-DOM
html学习笔记-DOM Table of Contents 1. 什么是 DOM? 2. DOM 节点 3. DOM 方法 4. DOM 属性 5. DOM 访问 6. DOM 修改 7. DOM ...
- Java程序猿的JavaScript学习笔记（9—— jQuery工具方法）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（6——面向对象模拟）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
随机推荐
- EZOJ #224
传送门 分析 首先我们发现要让答案最小,或运算一定是没有用的 我们还可以发现a^b = a&(~b) 所以异或运算也没有用 于是我们只考虑否和与 我们还会得到一个性质就是没增加一个数一定会让答 ...
- 32 取一个整数a从右端开始的4-7位
题目:取一个整数a从右端开始的4-7位 public class _032FetchDigit { public static void main(String[] args) { fetchDigi ...
- kcp结构体字段含义
conv 会话IDmtu 最大传输单元mss 最大分片大小state 连接状态(0xFFFFFFFF表示断开连接)snd_una 第一个未确认的包snd_nxt 下一个待分配的包的序号rcv_nxt ...
- UVa 10766 Organising the Organisation (生成树计数)
题意:给定一个公司的人数,然后还有一个boss,然后再给定一些人,他们不能成为直属上下级关系,问你有多少种安排方式(树). 析:就是一个生成树计数,由于有些人不能成为上下级关系,也就是说他们之间没有边 ...
- 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况
JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函 ...
- 编写高质量代码改善C#程序的157个建议——建议95：避免在构造方法中调用虚成员
建议95:避免在构造方法中调用虚成员 在构造方法中调用虚方法会带来一些意想不到的错误,虽然这种方法不常见,但还是需要注意这类陷阱. static void Main() { American amer ...
- 前端jq设置下拉框的，单选框，复选框的帖子
$(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...
- SELinux导致无法访问外网，PHP连接MySQL异常Can't connect to MySQL server、redis程序访问提示Redis server went away的解决方法
今天上班遇到的问题,新配的Linux服务器,php.Apache和一系列扩展插件装好后,在本地好好的程序移上去就一直抱数据库连接错误,而用sql命令却能连接上去, 做了一个简单的判断数据库连接页面还是 ...
- BP神经网络研究（一）
本随笔参考文章:<BP神经网络详解与实例>(链接: https://pan.baidu.com/s/1e2niIvD9KtLXEqwXtgdXxw 密码: vb8d) 本随笔原创,转发请注 ...
- Python【读取文件，第一行与最后一行】
文件小的读取方法 with open("a1.txt","r",encoding="gbk") as f: r = f.readlines( ...