欢迎光临
我的个人博客网站

WEB前端第二十九课——Document节点操作

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> 

  WEB前端第二十九课——Document节点操作

 

 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> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第二十九课——Document节点操作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏