- A+
1.Document节点
DOM全称为 Document Object Model，即文档对象模型，是一套管理控制HTML文档的规则，而Document节点则是一种具象化的表现形式
如果把整个HTML文档看成一个对象，那么这个对象就是Document节点，而如何操作控制这个对象的标准，就是DOM
DOM中规定HTML页面中所有的元素都是节点，可以通过Document点号运算符调用所有元素
Document节点又被称作Document对象，每个载入浏览器的HTML文档都会成为Document对象，document是HTML文档的根节点
因此，为了在脚本（Script）中操作页面，提出了Document节点和DOM规则
2.Document应用练习
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document滚动标题练习</title> </head> <body> <script> setInterval(function () { var tempTitle=document.title; var titleArr=tempTitle.split(''); titleArr.push(titleArr.shift()); var newTitle=titleArr.join(''); document.title=newTitle; },600); </script> </body> </html>
JavaScript计时事件，两个关键方法：
setInterval，间隔指定的毫秒数不停地执行指定代码
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
setTimeout，延迟指定的毫秒数后执行指定的代码
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码
3.Document节点属性
使用较多的属性有以下三类
① doctype，documentElement，body，head， 用于返回文档内部的某个节点
② documentURI，URL，domain，lastModified，location，title，readyState， 用于返回文档指定的信息
③ anchors，forms，images，links，scripts， 用于返回文档内部特定节点的集合
4.第一类属性
① 对于HTML文档来说，document对象一般有两个子节点，第一个子节点就是 docType（第二个是html）
docType节点是一个对象，包含了当前文档的类型信息，对于HTML5文档来说，docType节点就代表<!DOCTYPE html>
语法：document .docType;
② documentElement属性表示当前文档的根节点，通常是document的节点的第二个子节点，紧跟在document.docType节点后面
但是，一般情况下都是通过documentElement节点来访问当前页面中的其他子节点
语法：document .documentElement
③ body属性返回当前文档的body或frameset节点，如果不存在这样的节点则返回 null
语法：document .body；
④ head属性返回当前文档的head节点，如果当前文档有多个head，则返回第一个
语法：document .head；
5.第二类属性
① documentURI属性返回当前文档的网址，所有文档都具备该属性
语法：document .documentURI
② URL属性返回当前文档的网址，URL属性只有HTML文档才具备，该属性为只读属性不能写入
语法：document .URL
③ domain属性返回当前文档的域名，如果无法获取域名则返回 null
语法：document .domain
④ lastModified属性返回当前文档（网页）最后修改的时间戳，格式为字符串
语法：document .lastModified
注意，lastModified属性的返回值是字符串，所以不能直接用于比较，如果要比较两个文档哪一个时间更新，则需要将其转换成时间戳格式
语法示例：Date.parse(doc1.lastModifyed)，Date.parse方法能够将时间格式的字符串转换成时间戳格式
⑤ location属性返回一个只读对象，提供了当前文档的URL信息
document.location.href，返回完整的URL，可以写入（指定新网址）
document.location.protocol，返回当前遵守的协议
document.location.host，返回当前页面域名+端口号
document.location.hostname，返回当前页面域名
document.location.port，返回当前页面端口号
document.location.pathname，返回当前页面在服务器中的路径
document.location.search，返回当前页面URL中的查询字符串
document.location.assign('网页地址')，跳转到另一个网址（与第一种的用法有相似之处）
⑥ location其他内容
以下方法效果相同，都能改变当前页面的URL
location.assign('传递一个URL')；
window.location = '传递一个URL'；
location.href = '传递一个URL'；（常用方式）
reload():重新加载当前显示的页面
location.reload(false): //优先从本地缓存重新加载
location.reload(true): //优先从服务器重新加载
location对象的 search属性获取URL中保存的页面提交的字符串信息
⑦ title属性返回当前文档的标题，该属性是可写的
语法：document.title
写入信息时：document.title = '写入的标题'；
⑧ characterSet属性返回渲染当前文档的字符集，比如 UTF-8、ISO-8859-1等
语法：document.characterSet
⑨ readyState属性返回当前文档的状态，返回值包括三种：
loading，表示加载HTML代码阶段，尚未完成解析
interactive，表示加载外部资源阶段
complete，表示全部加载完成
<script> console.log(document.readyState); var stateCheck=setInterval(function () { console.log(document.readyState); if (document.readyState=='complete'){ clearInterval(stateCheck); } },500); </script>
6.第三类属性
这些集合都是动态的，原节点有任何变化会立刻反映在集合中
① anchors属性返回网页中所有指定了 name属性的 a标签元素
② forms属性返回网页中所有的表单
③ images属性返回网页中所有的图片
④ links属性返回网页中所有链接元素（带有href属性的 a标签）
⑤ scripts属性返回网页中所有的脚本
<body> <a href="#" name="anchorFirst">链接first</a> <a href="#" >链接second</a> <a href="#" name="anchorThird">链接third</a> <script> var coll=document.anchors; console.log(coll); //打印所有定义了 name属性的 a标签元素，返回值为结合 console.log(typeof coll); //返回值类型为 Object console.log(coll[1]); //打印指定的定义了 name属性的 a标签元素 </script> </body>
7.document选择页面元素
① querySelector() 方法返回匹配指定的CSS选择器的元素节点，
如果多个节点满足匹配条件，则返回第一个匹配的节点
如果没有满足匹配条件的节点，则返回 null
语法：document .querySelector('元素选择器 | 类选择器 | id选择器');
② querySelectorAll() 方法用来根据指定的选择器进行页面元素筛选
如果多个元素满足匹配条件，则返回这些元素构成的集合
语法：document .querySelectorAll('选择器名')；
返回值为一个节点列表，不是数组，但可以像数组一样使用列表
如果查找失败不是返回 null，而是返回一个空的节点列表
③ 其他常用选择方式
getElementById()，返回匹配指定 id属性的元素节点
getElementByTagName()，返回所有匹配指定标签的元素节点
getElementByClassName()，返回符合指定类名的所有元素节点
getElementByName()，返回匹配指定 name属性的所有元素节点
注意，上述方法中直接使用类名、id名等，并不是选择器名！！
8.document创建页面元素、属性
① createElement()，生成HTML元素节点
语法：var newElem=document .createElement(‘标签名’)； //所创建节点名需使用引号
注意，该方法创建的页面元素不会直接显示在页面中，而是默认存储在内存中
② appendChild()，通过该方法将创建的元素添加到页面的指定父元素中
语法：父元素名 .appendChild(newElem)；
③ createTextNode()，该方法用于对新建元素添加内容，方法的参数为需要生成的文本内容节点
语法：var elemText=document .createTextNode(' 需要添加的文本节点内容 ')；
newElem .appendChild(elemText);
另外，还可以使用 innerHtml属性设置或返回双标签之间的HTML内容
语法：元素节点（变量名）.innerHtml=' text ';
④ createAttribute()方法用于创建属性对象节点，返回值为属性本身
语法：var elemStyle=document.createAttribute(' 属性名 ')；
elemStyle .value='color : red'; // 使用 .value对属性赋值
⑤ setAttributeNode()方法用于将属性节点添加到元素中，进而实现元素的属性设置
语法：newElem.setAttributeNode(elemStyle);
<script> var newElem=document.createElement('p'); //创建<p>标签 var elemText=document.createTextNode('祝天下单身狗情人节快乐！'); //创建元素内容节点 newElem.appendChild(elemText); //将内容节点添加给<p>标签 var elemAttrStyle=document.createAttribute('style'); //创建“style”属性 // var elemAttrAlign=document.createAttribute('align'); //创建“align”属性 elemAttrStyle.value=('color:red;text-align:center;font-size:25px'); //向“style”属性赋值 // elemAttrAlign.value=('center'); //向“align”属性赋值 newElem.setAttributeNode(elemAttrStyle); //将“style”属性添加给<p>标签 // newElem.setAttributeNode(elemAttrAlign); //将“align”属性添加给<p>标签 var body=document.querySelector('body'); //选择页面<body>标签 body.appendChild(newElem); //将<p>标签添加到页面body中 </script>
9.操作元素属性的方法
操作Element节点的CSS样式，最简单的方法之一是使用节点对象的以下三种方法，进行读、写、删HTML元素的style属性
① getAttribute()，获取Element属性，语法：元素节点 .getAttribute(' 属性名 ')；，返回值为属性值
② setAttribute()，设置Element属性，语法：元素节点 .setAttribute(' 属性名 ' , ' 属性值 ')；
③ removeAttribute()，删除Element属性，语法：元素节点 .removeAttribute(' 属性名 ')；
10.元素节点的style属性
Element节点本身也提供了 style属性用于操作CSS样式，style属性指向一个对象，用于读写页面元素的行内CSS样式
<script> var newElem=document.createElement('p'); //创建<p>标签 var elemText=document.createTextNode('祝天下单身狗情人节快乐！'); //创建元素内容节点 newElem.appendChild(elemText); //将内容节点添加给<p>标签 newElem.style.textAlign='center'; newElem.style.backgroundColor='hotpink'; newElem.style.borderBottom='2px solid darkgreen'; newElem.style.color='blue'; newElem.style.fontSize='25px'; newElem.style.cssFloat='none'; //float为JavaScript保留字 document.body.appendChild(newElem); //将<p>标签添加到页面body中 </script>
注意：元素的 style对象对应元素的 style属性，style对象中的样式与 style属性中的样式名称是一一对应的，但书写规则有一定差别
① 将横杠（-）从CSS属性命中去除，然后将横岗后的第一个字母大写；
② CSS属性名是JavaScript保留字的，需要在属性名之前加“css”字符串前缀；
③ style对象的属性值都是字符串，包括计量单位
11.style属性的cssText用法
style对象的 cssText属性可以用来直接读、写、删整个 style属性
语法：元素节点 .style .cssText=' 样式 ';
<script> var newElem=document.createElement('p'); //创建<p>标签 var elemText=document.createTextNode('祝天下单身狗情人节快乐！'); //创建元素内容节点 newElem.appendChild(elemText); //将内容节点添加给<p>标签 newElem.style.cssText='text-align:center;color:blue;font-size:25px;border-bottom:2px solid darkgreen'; document.body.appendChild(newElem); //将<p>标签添加到页面body中 </script>
删除整个 style属性可以使用<元素节点 .cssText=' ' >这种方式
cssText对应的是HTML元素的 style属性，所以在书写时不需要改写属性名
12.style属性方法
style对象提供了三种方法分别读、写、删行内样式
① setProperty()，设置样式，语法：元素节点 .style .setProperty(' propertyName ' , ' value ');
② getPropertyValue()，获取样式，语法：元素节点 .style .getPropertyValue(' propertyName ');
③ removeProperty()，删除样式，语法：元素节点 .style .removeProperty(' propertyName ');
<script> var newElem=document.createElement('p'); //创建<p>标签 var elemText=document.createTextNode('祝天下单身狗情人节快乐！'); //创建元素内容节点 newElem.appendChild(elemText); //将内容节点添加给<p>标签 var elemStyle=newElem.style; elemStyle.setProperty('text-align','center'); var queryRes=elemStyle.getPropertyValue('text-align'); console.log(queryRes); elemStyle.removeProperty('text-align'); document.body.appendChild(newElem); //将<p>标签添加到页面body中 </script>
