Web基础之JavaScript（二）

window对象

• DHTML

1. 操作HTML以创造各种动态视觉效果，是一种浏览器端的动态网页技术。
2. DHTML的功能：
   —> 动态改变页面元素。
   —> 事件响应机制制作动态折叠的树形结构和菜单。
   —> 与用户进行交互等。
3. 对象模型：

Paste_Image.png

window

表示浏览器中打开的窗口。也是父对象。
1）常用属性：
①name：窗口名称。
②opener：打开当前窗口的window对象（引用）。
③status：窗口底部状态栏信息。
2）常用子对象：
①document：代表给定浏览器窗口中的HTML文档。
②history：包含了用户浏览过的URL信息。
③location：包含关于当前URL的信息。
④navigator：包含Web浏览器的信息。
⑤screen：包含关于客户屏幕和渲染能力的信息。
⑥event：代表事件状态。
3）方法：
—> alert(str) : 提示对话框，显示str字符串的内容。
—> confirm(str) ：确认对话框，按确定返回true，其他操作返回false;
—> prompt(str,value)：输入对话框。采用文本框输入信息，str为提示信息，value为初始值，按“确定”返回输入值，其他操作返回undefine，value可省。
//使用：var msg = confirm(str); if(msg==true){…}
【注意：window.prompt("请输入ID：");//因为不能控制它，所以很少用】
—> window.open(url)：重复打开。
—> window.open(url,windowName)：采取命名方式，避免重复打开
—> window.open(url,windowName,config)：config设置新窗口外观如高和宽。
windowName: _blank:在新窗口中打开；_self：当前窗口中打开；_top：当前网页上部窗口中打开
config: top/left：窗口离屏幕顶部/左边距离； width/height：窗口宽高；
menubar/toolbar/scrollbar/status：yes,no窗口有没有菜单/工具条/滚动条/状态栏
—> window.close()：关闭窗口。

function Wopen(){
      var win = window.open("http://www.imooc.com","_blank","width=300,height=200,
      menubar=no,toolbar=no,status=no”);
}

周期性定时器
—>window.setInterval(exp,time)：周期性触发代码exp，返回已经启动的定时器。exp：执行语句，time：时间周期，单位为毫秒;
【注意：调用：setInterval("clock()",1000)或setInterval(clock,1000)】
—> window.clearInterval(tObj)：停止启动的定时器。tObj：启动的定时器对象。
一次性定时器
—>window.setTimeout(exp,time)：一次性触发代码exp，返回已经启动的定时器。exp：执行语句，time：时间周期，单位为毫秒。
【注意：调用自身可无限次循环】
—> window.clearTimeout(tObj)：停止启动的定时器。tObj：启动的定时器对象。
—> print()：打印当前窗口内容
—> focus()：把键盘焦点给予一个窗口
—> blur()：把键盘焦点从顶层窗口移开
—> moveBy()：可相对窗口的当前坐标把它移动指定的像素
—> moveTo()：把窗口的左上角移动到一个指定的坐标
—> resizeBy()：按照指定的像素调整窗口的大小
—> resizeTo()：把窗口大小调整到指定的宽高
—> scrollBy()：按照指定的像素来滚动内容
—> scrollTo()：把内容滚动到指定坐标

Document对象与DOM

• 概念：
  1）每个载入浏览器的HTML文档都会成为Document对象。
  ①通过使用Document对象，可以从脚本中对HTML页面中的所有元素进行访问（操作文档中的任何内容，都通过Document）。
  ②Document对象是window对象的一部分，可通过window.document方式对其进行访问。
  2）DOM：Document Object Model，文档对象模型，HTML文档中的所有节点组成了一个文档树（或节点树）。
  ①树起始于文档节点，Document对象是一颗文档树的根。
  ②HTML文档中的每个元素、属性、文本等都代表这树中的一个节点。
  ++ write(“str”) 直接向HTML输出流写内容；是eval的一种形式。eval要尽量避免，是出于安全考虑，因为eval过于强大，把可string串当作代码执行。若使用不好可千万安全漏洞。

公有属性：
—> nodeName：给定节点的名字(字符串，只读);
—> nodeType：给定节点的类型(整数，只读；元素 1 ；属性 2；文本 3；注释 8；文档 9)
—> nodeValue：给定节点的当前值（元素的为underfine或null；文本的是文本自身；属性节点是属性的值）

• 根据元素ID查找节点
  1）方法：document.getElementById(idValue)
  2）忽略文档的结构，通过指定的ID来返回元素节点。
  3）可以查找整个HTML文档中的任何HTML元素。
  【注意：如果ID值错误，则返回null。】
• 根据层次查找节点
  1）遵循文档的层次结构，查找单个节点：parentNode、firstChild、lastChild、parentNode、nestSibling(下一个子节点)、previousSibling(给定节点上一个子节点)
  2）遵循文档的层次结构，查找多个节点：
  childNodes：以s结尾的都是数组，则有length属性。
  【注意：节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7】

如： var sObj=document.getElementById("sell");
        alert(sObj.childNodes.length);  sObj.firstChild;

• 根据标签名称查找节点

1）getElementsByTagName("namestr")：在某个节点的所有后代里查找某种类型的元素（根据指定的标签名），并返回所有的元素（返回一个节点列表）。
①忽略文档的结构，查找整个HTML文档中的所有元素。
②如果标签名错误，则返回长度为0的节点列表。
【注意：方法名为getElements，故返回的是一个数组】
2）length属性：返回的是一个节点列表，是个数组，因此可用length属性获取元素个数。使用[index]可定位具体的元素。
getElementsByName(“name”)：通过元素的name中的内容来查找 ，返回一个数组；

• 读取节点信息
  1）规则一：将HTML标签对象化，操作前先明确被对象化的标签都有什么属性。
  如：aObj代表一个元素，有aObj.href属性，但没有aObj.value和aObj.src
  2）规则二：innerHTML：设置或获取位于对象起始和结束标签内的内容。
  如：aObj.innerHTML可修改元素标签中的“元素”两字
  【注意：单标签无法用innerHTML修改内容。】
  3）规则三：nodeName：得到某个元素节点和属性节点（即可得到标签或属性名称）及其类型位置。xxx.nodeName：当未知节点类型时，使用该属性获得节点的名称，全大写方式。
  如：if(xxx.nodeName == "IMG") xxx.src = "http://...";
  4）节点属性：getAttribute(“attrName”)方法：根据属性名称获取属性的值。
  用于将HTML标签、属性、CSS样式都对象化。
  setAttribute(name,value):设置属性值；若不存在具有指定名称的属性，该方法将创建一个新属性。
• 修改节点信息
  1）style属性：语法：node.style.color; node.style.fontSize
  【注意：CSS样式中属性名内有“-”的，这里省略，并把后面单词首字母大写！
  ;属性值要加上引号】
  2）className属性：语法：var Obj=document.getElementById("p1");
  如：Obj.classname="样式类名称";//可用于设置不同的样式。
• 查找并修改节点信息
  1）使用getElementById()方法找到元素节点。
  2）修改元素内容：innerHTML
  3）修改样式：style属性或className属性
  4）修改属性：html属性
• 增加新节点
  1）步骤：
  ① 创建一个新元素，document.createElement(“elementName");比如：元素名可为a/input/option等；返回新创建的节点。
  ② 为新元素设置相关的数据。如：

var newNode=document.createElement("input");
newNode.type="text"; newNode.value="mary";
newNode.style.color="red";

③ 把新节点加入树上（新元素加入文档），作为树上某个节点的子节点存在。

xxx.appendChild(newNode);//追加
xxx.insertBefore(newNode,oldNode);//新节点放在旧节点之前

• 删除节点
  1）语法：parentNode.removeChild(childNode);
  【注意：一定是从父节点删除子节点，不能直接删除子节点。】
  其他：
  createTextNode()：创建一个包含给定文本的新文本节点
  replaceChild()：把一个给定父元素的一个子节点替换为另一个节点

博客地址：Web基础之JavaScript（二）