4、BOM编程 DOM编程（1）

来源：互联网发布：看直播的软件编辑：程序博客网时间：2024/05/16 15:23

BOM

全称 Browser Object Model，浏览器对象模型。
JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一

对象（只有一个全局的）

window 对象

Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

window方法：

document    对Document对象的只读引用 location    用于窗口或框架的 Location 对象history 对 History 对象的只读引用。  document.tilte  设置网页的标题moveto()  将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。moveby()    相对于目前的位置移动。resizeTo()   调整当前浏览器的窗口。open()      打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）setTimeout(vCode, iMilliSeconds)        超时后执行代码。setInterval(vCode, iMilliSeconds)       定时执行代码，第一次也是先待，到时再执行。

事件：

基本上所有的HTML元素中都可以指定事件属性。每个元素支持什么样事件应查询文档。所有的事件属性都是以on开头，后面的是事件的触发方式，如：

onclick，表示单击onkeydown，表示键按下

常用事件类型

鼠标点击相关：        onclick 在用户用鼠标左键单击对象时触发。         ondblclick 当用户双击对象时触发。         onmousedown 当用户用任何鼠标按钮单击对象时触发。         onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 鼠标移动相关：        onmouseout  当用户将鼠标指针移出对象边界时触发。         onmousemove 当用户将鼠标划过对象时触发。 焦点相关的：        onblur 在对象失去输入焦点时触发。         onfocus 当对象获得焦点时触发。其他：        onchange 当对象或选中区的内容改变时触发。         onload 在浏览器完成对象的装载后立即触发。         onsubmit 当表单将要被提交时触发。

location对象

Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
location中的重要方法：

href属性  设置或获取整个URL为字符串。reload()    重新装入当前页面

screen对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。属性：    availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。         availWidth  获取系统屏幕的工作区域宽度，排除 Windows 任务栏。       height      获取屏幕的垂直分辨率。     width       获取屏幕的水平分辨率。 示例：    document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>");    document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");

document对象

该对象代表整个文档页面对象的集合：    all     获取页面所有元素对象    forms   获取页面所有表单对象    images  获取页面所有图片对象    links   获取所有超链接或area对象具体的内容会在学习DOM时学习。

history对象

一些方法：

history.back() - 与在浏览器点击后退按钮相同history.forward() - 与在浏览器中点击按钮向前相同

DOM

全称Document Object Model，即文档对象模型。
DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。

浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。

结点层次

HTML网页是可以看做是一个树状的结构，如下：

html |-- head |     |-- title |     |-- meta |     ... |-- body |     |-- div |     |-- form |     |     |-- input |     |     |-- textarea ...   ...   ...这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。节点最多有一个父节点，可以有多个子节点。

HTML DOM 定义了访问和操作HTML文档的标准方法。

document    代表当前页面的整个文档树。访问属性    all    forms    images    links    body访问方法(最常用的DOM方法)

案例：

<html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">// 获取dom 树, 获取document 对象.var dom = window.document;// all 获取页面中所有的标签节点 ,注释和文档类型约束.function testAll() {    var allArr = dom.all;    alert(allArr.length);    for (var i = 0; i < allArr.length; i++) {        //获取节点名称        alert(allArr[i].nodeName);    }}// anchors 获取页面中的所有的锚连接.function testAnchors() {    var anArr = dom.anchors;    alert(anArr.length);}// froms  获取所有的form 表单对象function testForms() {    var formArr = dom.forms;    alert(formArr.length);    alert(formArr[0].nodeName);}// imagesfunction testImages() {    var imageArr = dom.images;    alert(imageArr.length);}// links  获取页面的超链接.function testLinks() {    var linkArr = dom.links;    //alert(linkArr.length);    for (var i = 0; i < linkArr.length; i++) {        //alert(linkArr[i].nodeName);    }    for (var i in linkArr) {        alert(i);    }}//testLinks();// 获取页面的Bodyvar body = dom.body;alert(body.nodeName);</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript</title></head><body onmousemove="testLinks(this)">    <img src="xxx" alt="这是一个美女"/>        <img src="xxx" alt="这是一个美女"/>        <img src="xxx" alt="这是一个美女"/>        <a href="http://www.baidu.com">百度一下</a>        <a href="http://www.google.com">百度两下</a>        <a href="http://www.baigu.com">百谷一下</a>        <a name="one"></a>        <a name="two"></a>        <form>            <label>姓名:</label><!--默认不写type 就是文本输入框-->            <input  type="text"/>        </form></body></html>

获取结点

document.getElementById(“html元素的id”)
document.getElementsByTagName(“标签名”)
document.getElementsByName(“html元素的name”)
示例：

    1.得到所有的div元素并显示信息（innerHTML）。    2.得到所有div元素中id为"test"的结果。

Var dom = window.document;function testByTagName() {    var iptArr = dom.getElementsByTagName("input");    for (var i = 0; i < iptArr.length; i++) {        alert(iptArr[i].value);    }}// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,//window.onload = testByTagName;//2，得到所有标签id为"username"的结果。获取旧value值并设置value值function testById() {    var user = dom.getElementById("username");    alert(user.value);    user.value = "rose";}//testById();//3. 获取所有标签name 为like的元素.获取value值.function testByName() {    var likeArr = dom.getElementsByName("like");    for (var i = 0; i < likeArr.length; i++) {        alert(likeArr[i].value);    }}testByName();

案例

1.写一个form，其中有多个checkbox。
2.获取所有选中的数量。
3.实现全选与全不选的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">function getSum(){    /*    需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。    思路：    1，先获取所有的checkbox对象。    2，对这些对象进行遍历。判断哪个对象被选中。    3，对被选中对象的金额进行累加。    4，显示在按钮右边。    */    var items = document.getElementsByName("item");    var sum = 0;    for(var x=0; x<items.length; x++)    {        if(items[x].checked)        {            sum += parseInt(items[x].value);        }    }    var str = sum+"元";    document.getElementById("sumid").innerHTML = str.fontcolor('red');}function checkAll(node){    /*    需求：通过全选checkbox，将其他条目都选中。    思路：    只要将全选checkbox的checked状态赋值给其他的item checked状态即可。    */    //var allNode = document.getElementsByName("all")[index];    var items = document.getElementsByName("item");    for(var x=0; x<items.length; x++)    {        items[x].checked = node.checked;    }}</script></head><body><div>商品列表</div><input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br /><input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br /><input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span></body></html>

通过结点关系找结点

从一个节点出发开始查找：

parentNode  获取当前元素的父节点。childNodes  获取当前元素的所有下一级子元素。firstChild  获取当前节点的第一个子节点。lastChild   获取当前节点的最后一个子节点。nextSibling     获取当前节点的下一个节点。（兄节点）previousSibling 获取当前节点的上一个节点。（弟节点）示例1：    firstChild属性最普遍的用法是访问某个元素的文本：    var text=x.firstChild.nodeValue; 示例2：        parentNode 属性常被用来改变文档的结构。    假设您希望从文档中删除带有 id 为 "maindiv" 的节点：    var x=document.getElementById("maindiv");    x.parentNode.removeChild(x);

获取结点对象的信息

每个节点都包含的信息的，这些属性是：nodeType    节点类型 nodeName    节点名称nodeValue   节点值nodeTypenodeType 属性可返回节点的类型。        ---------------------------------    元素类型 节点类型     ------------------      元素        1       就是标签元素，例<div>..</div>      文本        3       标签元素中的文本      注释        8       表示为注释nodeName    nodeName 属性含有某个节点的名称。    --------------------------------    元素节点的 nodeName 是标签名称     属性节点的 nodeName 是属性名称     文本节点的 nodeName 永远是 #text     文档节点的 nodeName 永远是 #document nodeValue    对于文本节点，nodeValue 属性是所包含的文本。    对于属性节点，nodeValue 属性是属性值。    对于注释节点，nodeValue 属性注释内容。    nodeValue 属性对于文档节点和元素节点是不可用的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">//节点和节点之间的关系.//获取dom树var dom = window.document;//获取指定id 的标签节点.function test() {    var form = dom.getElementById("form1");    //获取父节点.    //alert(form.parentNode.nodeName);    // 获取子节点(Node 包含 文本,注释,标签)    var childArr = form.childNodes;    //alert(childArr.length);    /*    for (var i = 0; i < childArr.length; i++) {    alert(childArr[i]);    }    */    // 获取第一个孩子.    var first = form.firstChild;    //alert(first);    //最后一个孩子.    var last = form.lastChild;    //alert(last);    // 获取下兄弟(获取弟弟)    var sibling = form.nextSibling;    //alert(sibling.nodeName);    // 获取大哥    var previous = form.previousSibling;    alert(previous.nodeName);}test();</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript</title></head><body onmousemove="test(this)">        <a>哈哈</a>        <form id="form1">            <label>姓名:</label>            <input type="text" />        </form></body></html>

0 0