Skr-Eric的Javascript课堂（五）——JS的window对象和DOM对象

 window 对象

1. window对象的属性

window对象的属性，又都是对象类型的

1. screen 对象

访问screen屏幕对象 ：

et :

console.log(window.screen);

console.log(screen);

获取屏幕尺寸信息 ：

1. width/height : 获取屏幕的宽高

2. availWidth/availHeight : 获取屏幕实际可用的宽高

 实际可用宽高是屏幕宽高减去任务栏的高度/宽度

 不同的操作系统，任务栏高度不同：XP-40px,Win7-30px;

 

2. history 对象

作用 ： 包含当前窗口访问过的所有URL

属性和方法 ：

1. 属性：

length : 当前窗口访问过的URL数量

2. 方法：

1. back() : 相当于后退按钮

2. forward() : 相当于前进按钮

3. go(num) : 跳转几步，num取值可正可负

 正值表示前进几步，负值表示后退

 

3. location 对象

1. 作用 ：location对象保存的是当前窗口地址栏的信息

也是当前页面的URL

2. 属性 ：

href : 可以获取当前窗口正浏览页面的URL

 如果给href属性赋值，相当于页面跳转,

 在当前窗口中实现内容重定向

3. 方法 ：

reload(param); 重载页面，相当于刷新操作

参数 ：

可选，默认为false,表示从缓存中加载

可设置为true,表示从服务器端重新请求，加载页面

 

  4. navigator 对象

作用 : 保存浏览器相关的信息

 

 DOM （document对象）

1. DOM ：文档对象模型，核心是document对象，封装了所有的

 HTML元素，及操作HTML元素的属性和方法

 

2. 节点对象 ：

网页在加载的过程中，会自动封装文档中所有的内容，

生成一颗DOM树，包含HTML标签，文本，注释，每个标签，

标签内容，标签属性，注释内容都对应称为节点

1. 节点分类 ：

1. 元素节点 - 网页中的每个标签都是元素节点

2. 属性节点 - 每个标签中的标签属性都是属性节点

3. 文本节点 - 标签中的文本内容

4. 注释节点 - 文档中每段注释，都对应成一个节点

5. 文档节点 - 整个HTML文档 document

et :

<a href="#">百度</a>

元素节点 ：<a></a>

属性节点 ：href

文本节点 ：百度

 

2. 节点操作 ：

1. 获取节点

2. 读取节点内容

3. 创建节点

4. 修改节点

5. 删除节点

 

3. 获取元素节点 ：

1. 根据标签名获取元素节点 ：

document.getElementsByTagName('a');

参数 ：标签名

返回值 ：节点列表（类数组结构,可以通过下标访问）

2. 根据标签的class属性值，获取元素节点

document.getElementsByClassName('c1');

参数 ：class属性值

返回值 ：节点列表

3. 根据标签name属性值获取元素节点

document.getElementsByName('uname');

参数 ：name属性值

返回值 ：节点列表

4. 根据标签的id属性值获取具体的节点对象

document.getElementById('box');

参数 ：id属性值

返回值 ：具体的节点对象

元素节点常用属性 ：

1. innerHTML ：用来设置或读取元素节点的标签内容，

 赋值时，可识别HTML标签。

2. innerText :设置或读取元素节点的标签内容，

 赋值时，不能识别HTML标签。

3. value : 用来设置或读取表单元素的值

使用注意 ：

根据代码从上到下的执行顺序，获取元素节点的操作，

需在body加载完毕之后执行，注意代码书写顺序

练习 ：

1. 创建页面，添加div， 文本框，按钮

2. 点击按钮时，将文本框中的内容以一级标题的形式

显示在div中

 

  4. 获取或设置元素节点的属性：

标签属性在JS中视为是元素节点对象的属性

1. 获取标签属性

方法 ：getAttribute('attrName');

参数 ：属性名

返回值 ：指定属性的值

2. 设置标签属性

方法 ：setAttribute('attrName','value');

参数 ：属性名与对应的属性值

3. 移除标签属性

方法 ：removeAttribute('attrName');

参数 ：属性名

4. 使用点语法访问对象属性

1. 设置属性值 ：

elem.id = ""; //设置id属性值

elem.className = ""; //设置class属性值

注意 ：class是JS关键字，不能直接使用

2. 获取属性值

console.log(elem.id);

3. 移除属性

elem.id = ""; //空字符串

elem.id = null;

练习 ：

1. 创建超链接，链接地址为百度

2. 创建按钮，实现点击按钮，修改超链接的连接

地址，改为http://www.tmooc.cn

 

5. 操作元素样式：

1. 可以通过属性id,class对应选择器，为元素添加样式

et :

elem.setAttribute("class","c1");

elem.className = "";

2. 访问节点对象的style属性，操作元素行内样式

行内样式 :

<h1 style="color:red;font-size:20px;"></h1>

使用 ：

通过元素节点访问style属性，style本身也是对象，

由属性和值组成

操作样式，实际是访问style对象的属性，为其赋值

et :

elem.style.color = "";

注意 ：

1. 一个单词构成的CSS属性，可以直接访问

2. CSS属性名中出现多个单词，使用‘-’连接时，

在JS中一律改成驼峰标识

et :

elem.style.fontSize = "20px";

elem.style.backgroundColor = "red";

3. 属性值以字符串形式赋值

 

6. 读取节点类型信息：

1. 查看节点类型

属性 ： nodeType

取值 ：

1    当前为元素节点

2  当前为属性节点

3  当前是文本节点

8    当前是注释节点

9    当前是文档节点

2. 获取节点名称

属性 ：nodeName

取值 ：

元素/属性节点  返回元素名/属性名

文本节点   返回#text

注释节点 返回#comment

文档节点 返回#document

 

7. 节点对象的层次属性：

1. parentNode

获取当前节点对象的父节点

2. childNodes

表示获取当前节点下所有的子节点,返回子节点数组。

包含文本节点。（换行也会被视为一个文本节点）

3. children

获取子节点，只获取子元素节点，

忽略文本节点和换行。返回子节点数组

4. nextSibling

获取下一个兄弟节点

5. nextElementSibling

获取下一个兄弟元素节点

6. previousSibling

获取前一个兄弟节点

7. previousElementSibling

获取前一个元素兄弟节点

8. attributes

获取当前元素节点所有属性节点的集合

 

8. 动态操作网页

1. 在网页中插入元素

1. 创建元素节点

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

参数 ：标签名

返回值 ：创建好的元素节点

 为元素添加文本内容 ：

1. div.innerHTML/innerText

2. 创建文本节点

 var text = document.createTextNode('');

 参数 ：文本内容

 返回值 ：文本节点

2. 添加节点

不管是在网页中追加子节点，还是为元素节点添加

文本节点，所有的添加操作都由父元素执行

语法 ：

父节点.appendChild(childNode);

默认在父节点的末尾添加子节点

注意 ：

文本节点是元素节点的子节点

练习 ：

1. 使用JS创建div

2. 设置div id="container"

3. 设置div文本为"动态创建的div"

4. 添加到body中显示

3. 在指定位置插入元素节点

只有父节点能执行插入，删除操作

语法：

parentNode.insertBefore(newElem,oldElem);

表示在oldElem之前插入newElem

4. 删除节点

语法 ：

parentNode.removeChild(elem);

在父节点中删除指定的子节点

 

 

 

想要看更多的课程请微信关注SkrEric的编程课堂