031-Web前端-JS-Document节点

最新推荐文章于 2022-04-26 10:50:37 发布

我的肚肚有点儿疼

最新推荐文章于 2022-04-26 10:50:37 发布

阅读量259

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Fenfen_vyron/article/details/106767577

版权

Web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

#6.15 以后尽量都长亿点 1.DOM Document节点 2.Document节点属性 3.Document节点操作页面元素

1.DOM Document节点

描述：

(1) DOM全称为Document Object Model，即文档对象模型。它是一套用来管理控制html文档的规则。

(2)document节点：document节点就是文档本身

说明：

(1)节点是对象的另外一种叫法，在DOM规则中规定对象都称为节点

(2)DOM规定页面中所有的元素都是节点

(3)document节点在页面加载时自动创建

目的：为了在JS中操作页面。所以提出了DOM规则，和document节点

2.Document节点属性

javascript为document节点提供了很多属性方便我们更好地使用。相对用得比较多的有下面这些：

(1)doctype,documentElement,body,head：返回文档内部的某个节点。

(2)documentURL,URL,domain,lastModified,location,title,readyState：返回文档指定信息。

(3)anchors,forms,images,links,scripts：返回文档内部特定节点的集合。

(1)doctype，documentElement，body，head属性

doctype：

对于HTML文档来说document对象一般有两个子节点，第一个子节点就是doctype。

doctype节点是一个对象，包含了当前文档类型信息。如果网页没有声明DTD，该属性返回null。

对于HTML5文档，doctype节点就代表<!DOCTYPE html>。

语法：document.doctype

var doctype = document.doctype;

console.log(doctype); // "<!DOCTYPE html>"

console.log(doctype.name); // "html"

documentElement：

document.documentElement属性，表示当前文档的根节点。

它通常是document节点的第二个子节点，紧跟在document.doctype节点后面。

对于HTML网页，该属性返回HTML节点。但是对我们来说一般都是通过documentElement节点来访问页面当中的其他子节点。

语法：document.documentElement

console.log(document.documentElement);

body：

body属性返回当前文档的body或frameset节点，如果不存在这样的节点，就返回null。

这个属性是可写的，如果对其写入一个新的节点会导致原有的所有子节点被移除。但是我们暂时不作考虑，稍后讲过通过节点改写html页面后我们再来考虑。

语法：document.body

console.log(document.body);

head：

head属性返回当前文档的head节点。如果当前文档有多个head（不建议），则返回第一个。

语法：document.head

console.log(document.head);

(2)documentURI，URL，domain，lastModified，location，title，readyState属性

//返回文档的固有属性

1.document.documentURI

console.log(document.documentURI);

2.URL

注意：本属性是只读，仅限于html

document.URL='http://www.baidu.com';//无效

console.log(document.URL);

3.domain

console.log(document.domain);

4.lastModified

lastModified属性返回当前文档（网页）最后修改的时间戳，格式为字符串。

console.log(document.lastModified);

5.location

描述：返回一个url信息构成的对象{}

console.log(document.location);

document.location.href=‘http://www.baidu.com';//可以跳转页面

console.log(document.location.href );

注意：search是获取url中保存的信息

location中有关的其他内容：

返回完整的URL：document.location.href //读写

返回当前遵守协议：document.location.protocol

返回当前页面域名+端口号：document.location.host

返回当前页面域名：document.location.hostname

返回当前页面端口号，如果不存在则返回空：document.location.port

返回当前页面在服务器中路径：document.location.pathname

返回当前页面URL中的查询字符串：document.location.search

跳转到另一个网址：document.location.assign(‘http://www.google.com’)

以下方法效果相同，都能够改变当前页面的url：

location.assign('传递一个url');

window.location = '传递一个url';

location.href = '传递一个url'; <常用>

document.location.href='http://www.baidu.com/';
window.location='http://www.baidu.com';
document.location.assign('http://www.baidu.com/');

重新加载当前显示的页面：reload()

location.reload(false):  //优先从本地缓存重新加载

location.reload(true)://优先从服务器重新加载

location对象的search属性代表URL的查询字符串（包括?）

// 查询字符串 为  '?id=x&sort=name'

var search = window.location.search;

search = search.slice(1); // 得到 'id=x&sort=name'  //slice从下标1处开始切割

search = search.split('&'); // 得到数组 ['id=x', 'sort=name']。  //在&处分割返回数组

6.title

title属性返回当前文档的标题，该属性是可写的。//可用来做标题滚动

语法：document.title

document.title = '新标题';

7.characterSet

characterSet属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。

语法：document.characterSet

8.readyState

readyState属性返回当前文档的状态。

共有三种可能值：

加载HTML代码阶段（尚未完成解析）是“loading”，

加载外部资源阶段是“interactive”，

全部加载完成是“complete”。

//下面这种判断方式只能判断一次，如果页面在判断时没有加载完成，那么就无法确定页面的究竟何时加载完毕。

if (document.readyState === 'complete') {

console.log('当前网页已经加载完毕');

}

//另一个例子：

console.log(document.readyState);

var timer=setInterval(function (){

console.log(document.readyState);

if(document.readyState=='complete'){

clearInterval(timer);//清除定时器

}

},20);

(3)anchors,forms,images,links,scripts：返回文档内部特定元素的集合。

这些集合都是动态的，原节点有任何变化会立刻反映在集合中。

anchors

anchors属性返回网页中所有指定了name属性的a节点元素。

forms

forms属性返回网页中所有表单。

images

images属性返回网页中所有图片

links

links属性返回网页中所有链接元素(即带有href属性的a标签)

scripts

scripts属性返回网页中所有的脚本

var scripts = document.scripts;

if (scripts.length !== 0 )

{console.log("当前网页有脚本");}

3.Document节点操作页面元素

(1)选中页面元素 (2)创建页面元素 (3)操作页面元素属性

(1)选中页面元素

1.querySelector（）方法

描述：本方法用来选中页面元素，根据指定的选择器进行筛选

如果有多个节点满足匹配条件则返回第一个匹配的节点。

如果没有发现匹配的节点则返回null。

语法：document.querySelector('选择器名');

//例子 ：

var p=document.querySelector('.pp');

var p2_span=p.querySelector('span');

console.log(p2_span);

ps：querySelector是匹配的选择器，那么如果是选择器为id时参数应该是”#id名"

2.querySelectorAll()方法

描述：本方法用来选中页面元素，根据指定的选择器进行筛选。

如果有多个元素满足条件，则返回这些元素构成的集合。

语法：document.querySelectorAll(‘选择器名');

注意：

返回的结果是一个节点列表，不是数组，但能够像数组一样使用列表

如果查找失败不是返回null，而是返回一个空的节点列表

例子：

var pList= document.querySelectorAll('.pp');

console.log(pList[1]  );

3.其他选择元素方式

//这些都不是选择器了

【getElementById()】返回匹配指定ID属性的元素节点

var p2=document.getElementById('p2');

console.log(p2);

【getElementsByTagName()】返回所有指定标签的元素

var p= document.getElementsByTagName('p');

console.log(p[1]);

console.log(p.length);

【getElementsByClassName()】//返回符合指定类名的所有元素

var pp=document.getElementsByClassName('pp');

console.log(pp[1]);

【getElementsByName()】用于选择拥有name属性的HTML元素

var p2_name= document.getElementsByName('p2_name');

console.log(p2_name[0]);

(2)创建页面元素节点、属性

1.createElement()方法

描述：创建一个页面元素

语法：document.createElement("标签名");

注意：本方法创建的页面元素不会直接显示在页面中，而是默认存在于内存中

var p= document.createElement('p');

console.log(p);

2.appendChild()

描述：给某个节点添加子节点

语法：fatherNode.appendChild(子节点);

var p= document.createElement('p');

document.body.appendChild(p);

3.createTextNode（）

描述：创建文本节点

例子：

var p= document.createElement('p');

//p.innerHTML='这是一个p标签';

var p_text=document.createTextNode('这是p段落');

p.appendChild(p_text);

document.body.appendChild(p);

4.createAttribute()

描述：创建一个属性节点

语法：document.createAttribute('属性名');

注意：

(1)本方法创建的是属性节点，不是css属性节点

(2)创建的属性节点使用value='';进行赋值

(3)创建的属性节点使用setAttributeNode（）方法绑定到元素上。

例子：

var p= document.createElement('p');

var p_text=document.createTextNode('这是p段落');

p.appendChild(p_text);

var p_align=document.createAttribute('align');

p_align.value='center';

p.setAttributeNode(p_align);

//将元素节点放到body中

document.body.appendChild(p);

(3)操作页面元素属性

1.操作元素属性的方法

getAttribute('属性名'); //获取元素属性值

setAttribute('属性名','属性值'); //设置元素属性

removeAttribute('属性名'); //删除元素属性

例子：

   var h2= document.querySelector('h2');

   document.querySelector('button').onclick=function(){

   h2.setAttribute('style','color:red;');

   }

2.style属性

描述：用来读写和设置元素的行内样式

语法：元素节点.style.xxx

注意：改写规则

a.将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写

b.CSS属性名是JavaScript保留字的，在属性名之前需要加上字符串“css”

c.style对象的属性值都是字符串，而且包括单位。

例子:

var h2 = document.createElement('h2');

h2.innerHTML = '你好大世界';

var h2_style = document.createAttribute('style');

h2_style.value = 'text-align:center;color:red';

h2.setAttributeNode(h2_style);

h2.style.textAlign = 'center';

h2.style.color = 'red';

h2.style.cssFloat = 'left';

document.body.appendChild(h2);

3.cssText属性

描述：可以用来读写或删除整个style属性。

语法：元素节点.style.cssText='css样式';

例子：

var h2 = document.createElement('h2');
h2.innerHTML = '你好大世界';
h2.style.textAlign = 'center';
h2.style.color = 'red';
h2.style.cssFloat = 'left';
h2.style.cssText = 'color:red;text-align:center';
document.body.appendChild(h2);

var divStyle = document.querySelector('div').style;
//divStyle.setProperty('background-color','red');
//console.log( divStyle.getPropertyValue('background-color'));
divStyle.removeProperty('background-color');

我的肚肚有点儿疼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
031-Web前端-JS-Document节点

DOM Document节点#6.15 1.DOM Document节点 2.Document节点属性 3.Document节点操作页面元素1.DOM Document节点描述： (1) DOM全称为Document Object Model，即文档对象模型。它是一套用来管理控制html文档的规则。 (2)document节点：document节点就是文档本身说明： (1)节点是对象的另外一种叫法，在...
复制链接

扫一扫