JavaScript学习记录（二）

来源：互联网发布：linux网络连接命令编辑：程序博客网时间：2024/06/06 14:29

接上一篇，继续学习JavaScript！

BOM 基础

即 Browser Object Model

JavaScript 是运行在浏览器中的，同样也提供了一系列对象用于与浏览器窗口进行交互。

这些对象包括 window，document，location，navigator 和 screen 等。

window 对象：

表示整个浏览器窗口，对操作浏览器窗口非常有用。对窗口本身下面四个方法最常用（坐标原点左上角，x 轴正方向从左到右，y 轴正方向从上向下）：

moveBy（dx，dy）：把浏览器窗口相对于当前位置水平向右移动 dx 个像素，垂直方向向下移动 dy 个像素。
moveTo（x，y）：把窗口移动到用户屏幕的（x，y）处。
resizeBy（dw，dh）：相对于浏览器窗口当前的大小，把宽度增加 dw 个像素，高度增加 dh 个像素。
resizeTo（w，h）：把窗口的宽度调整为 w 像素，高度调整为 h 像素，不能使用负数。

document 对象：

是 window 对象的一个属性。

主要用于获取和修改一些页面的属性以及属性集合。

例如通过它的URL属性可以获取当前页面的URL，或者将其设置为新的URL，把窗口导航到新的页面。

location 对象：

是 window 对象和 document 对象的属性。

主要作用：分析和设置页面的URL。

location.href是最常用的属性，用于获得或设置窗口的URL，类似于 document 的URL属性。

reload（）方法用来加载页面。

navigator 对象：

在客户端浏览器检测中最重要的对象。

最常用的是 userAgent 属性，通常浏览器判断都是通过该属性来完成的。

screen 对象：

window对象的属性之一，主要用来获取用户的屏幕信息，因为有时需要根据用户屏幕的分辨率来调节新开窗口的大小。

在确定窗口大小时 availHeight 和 availWidth 属性是非常有用的。

DOM 模型

即 Document Object Module （文档对象模型）

定义了用户操作文档对象的接口，使用户对HTML有了空前的访问能力，并使开发者能将 HTML 作为 XML文档来处理。

一节点及模型框架：

HTML 代码也是可以划分为比较直观的树状图，树状图中几种比较的节点：

元素节点：

HTML中的元素，如 <html> <body> <meta> <h2> <p> <li> 等等都是元素节点，各种标签便是这些元素节点的名称，被包含的元素即向下分支，可以说整个DOM模型都是由元素节点构成的。

文本节点：

在HTML中光由标记搭建框架是不够的，页面的最终目的是向用户展示内容。

属性节点：

页面中的元素会包含属性，例如几乎所有的元素都有一个 title 属性，开发者可以用这些属性对包含在属性里面的对象做出更准确的描述。

例子如下：

<a title="CSS" href="http://www.baidu.com">百度首页</a>

二使用 DOM

用节点来处理 HTML 网页，每一个DOM节点node都有一系列属性，方法可以使用，这些方法可以查阅w3school官网，链接：HTML DOM方法

下面说一些比较常用的方法：

访问节点

getElementByTagName（）用来返回一个包含某个相同标签名的元素的NodeList。

getElementById（）返回 id 为指定值的元素。

检测节点类型

通过节点的nodeType属性可以检测出节点的类型。该属性返回一个代表节点类型的整数值，总共有12个可选值。（元素节点1，属性节点2，文本节点3）。

利用父子兄关系查找节点

hasChildNodes（）方法和 childNodes 属性可以获取一个节点所包含的所有子节点。

parentNode属性可以获得一个节点的父节点。

nextSibling 和 previousSibling 属性访问兄弟节点。

三设置节点属性

getAttribute（）方法是一个函数，它只有一个参数即要查询的属性名称。

setAttribute（）方法可以修改节点的相关属性。

四节点操作

创建节点：

不同类型的节点创建方法略有区别。创建元素节点用 createElement（），创建文本节点用 createTextNode（），创建文档碎片节点用createDocumentFragment（）。

删除节点：

通过父节点的removeChild（）方法来完成。

通常是要找到要删除的节点，然后利用parentNode属性找到父节点，然后将其删除。

替换节点：

replaceChild（）来替换页面中的某个元素。

插入节点：

在特定节点前插入节点，insertBefore（）方法。

在特定节点后插入节点，首先判断目标节点是否是其父节点的最后一个子节点，如果是则直接用appendChild（）方法，否则利用 nextSibling 找到下一个兄弟节点，然后再用insertBefore（）。

五非标准 DOM innerHTML属性

表示某个标记之间的所有内容，包括代码本身。该属性可以读取，同时还可以设置。

六 DOM 与 CSS

结构，表现，行为三位一体。

className属性，可以修改一个节点的ＣＳＳ类别。

0 0