He Zhang

欢迎呀

smackdown

js-BOM_DOM总结

view

BOM

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

window对象

是javascript层级中的顶层对象，是代表浏览器窗口或一个框架，该对象在或者每次出现的时候都被自动创建。

moveto() 将窗口左上角的屏幕位置移动到指定的x和y位置
moveby() 相对于目前的位置移动
resizeTo() 调整当前浏览器的窗口
open() 打开新的窗口显示指定的URL
setTimeout(vCode,iMilliseconds) 超时后执行代码
setInterval(vCode,iMilliSeconds) 定时执行代码，第一次也是先到执行时在执行
事件
所有的事件都是以o n开头，后面的是事件的触发方式。如：
o’clock 表示单击
onkeydown 表示键按下

鼠标点击事件

o’clock 用户使用鼠标左键单击对象的时候触发
ondbclick 当用户双击对象的时候触发
onmousedown 当用户在鼠标位于对象之上的时候，释放鼠标按钮时候触发
onmouseout 当用户将鼠标指针移出对象边界的时候触发
onmousemove 当用户将鼠标划过对象的时候触发
onblur 在对象失去输入焦点的时候触发
onfocus 当对象获得焦点的时候触发
onchange 当对象或选中区的内容改变的时候触发
o load 在浏览器完成对象的装载后立即触发
o submit 当表单将要被提交的时候触发

location对象
location对象是由js runtime engine自动创建的，包含有关当前URL 的信息。
location 中的重要方法：
```
href 属性 设置或获取整个 URL 为字符串
reload（）重新装入当前页面
```
screen 对象
js自动创建的，包含有关客户机显示屏幕的信息
属性：
- availHeight 获取系统屏幕的工作区域高度，排除任务栏
- availWidth 获取系统屏幕的工作区域的宽度排除任务栏
- height 获取屏幕的垂直分辨率
- width 获取屏幕的水平分辨率
案例：

1 2	document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>"); document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");

document 对象

该对象代表整个文档页面
对象的集合：

all 获取页面所有的元素对象
forms 获取页面所有的表单对象
images 获取页面所有的图片对象
links 获取所有的超链接或者area对象
DOM
全称Document Object Model 即文档对象模型。
该模型描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML的时候，其实不是按照一行一行读取并解析的，而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器窗口中。

节点最多有一个父亲节点，可以有多个子节点。
HTML DOM 定义访问和操作HTML 文档的标准方法。

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

<script type="text/javascript">
      //获取Dom树 获取document对象
      var dom  = window.document;
      //获取界面的所有元素
      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 anaArr = dom.anchors;
          alert(anaArr.length);
          alert(anaArr[0].nodeName);
      }
      //获取所有的form对象
      function testForms() {
          var formARR = dom.forms;
          alert(formARR.length)
      }
      //images
      function testimage() {
          var ima = dom.images;
          alert(ima.length)
      }
      //获取页面的所有连接
      function testlinks() {
          var lin = dom.links;
          alert(lin.length)
      }

  </script>

获取节点对象的案例

function getobj(){
            //根据标签id获取对象
            var a = document.getElementById("1")
            alert(a.nodeName)
           //根据标标签属性名称获取对象
            var b = document.getElementsByName("bu")
            alert(b.length)

            //根据标签名称获取对象
            var c = document.getElementsByTagName("p")
            alert(c.length)
        }

通过节点关系查找节点

//从一个节点开始出发进行查找

parentNode 获取当前节点的父亲节点
childNodes 获取当前节点的孩子节点
firstChild 获取当前节点的第一个孩子节点
lastChild 获取当前节点的最后一个孩子节点
nextSibling 获取当前节点的兄弟节点
注意这个有一个隐藏的文本标签
previousSibling 获取当前节点的上一个节点
获取节点对象的信息
每个节点都包含的信息的，这些属性是：
nodType 节点类型
元素返回1
文本返回3
注释返回8
nodeName 节点名称
元素节点的nodeName是标签的名称
属性节点的nodeName是属性名称
文本节点的nodeName 永远是#text
文档节点的nodeName 永远是#document
nodeValue 节点值
对于文本节点 nodeValue 属性是包含的文本
对于属性节点 nodeValue属性是属性值
对于注释节点 nodeValue属性注释内容
nodeValue属性对文档节点和元素节点是不可用的
节点操作
创建新的节点
document.createElement(“标签名”) 创建新元素节点
elt.setAttribute(“属性名”,”属性值”）设置属性
elt.appendChild(e)
elt.insertBefore(new,child) 添加到elt中，child之前
elt.removeChild(eChild) 删除指定的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       var count =1;
       function add() {
           var trNode = document.createElement("tr");
           var tdNode = document.createElement("td");
           var inputNode  = document.createElement("input");
           inputNode.setAttribute("type","button");
           inputNode.setAttribute("value",count++);
           count++;
           tdNode.appendChild(inputNode);
           trNode.appendChild(tdNode);
           //trNode添加到指定的位置上
           var tbodyNode = document.getElementsByTagName("tbody")[0];
           var button1 = document.getElementById("b1");
           tbodyNode.insertBefore(trNode,button1);
       }
    </script>
</head>
<body>
  <table>
      <tr>
          <td>
              <input type="button" value="0" >
          </td>
      </tr>
      <tr id="b1">
          <td>
              <input type="button" value="添加" onclick="add()">
          </td>
      </tr>
  </table>
</body>
</html>

几个小案例

生成二级城市联动菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动菜单</title>
    <script type="text/javascript">
        function selcity() {
            //每一个省建立一个二维数组
            var arr = [['--选择城市--'],['海淀区','朝阳区','东城区','西城区']
                ,['沈阳','大连','鞍山','抚顺']
                ,['济南','青岛','烟台','威海']
                ,['石家庄','廊坊','唐山','秦皇岛']];
            //获取选择的省的角标
            var selNode = document.getElementById("selid");
            var index = selNode.selectedIndex;
            var cities = arr[index];
            var subSelNode = document.getElementById("subselid")
            //清除下拉菜单的内容
            subSelNode.options.length = 0;
            for(var x =0;x<cities.length;x++){
               var optNode = document.createElement("option");
               optNode.innerHTML = cities[x];
               subSelNode.appendChild(optNode);
            }
        }
    </script>
</head>
<body>
  <select id="selid" onchange="selcity()">
      <option>--选择省市--</option>
      <option>北京市</option>
      <option>辽宁省</option>
      <option>山东省</option>
      <option>河北省</option>
  </select>
  <select id="subselid">
      <option>--选择城市--</option>
  </select>
</body>
</html>

生产一个验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    <script type="text/javascript">
      function createCode() {
          var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
          //随机从数组中取出4个元素
          var mess = "";
          var index = 0;
          for (var i = 0; i < 4; i++) {
              //生成随机数 而且是在数组的长度范围内
              //0-9 之间的随机数，Math.floor(Math.random()*10)
              //0到数组长度（不包含）之间的浮点数 向下取整
              var index = Math.floor(Math.random() * datas.length);
              mess += datas[index];
          }
          ;
          var codeSpan = window.document.getElementById("codeSpan");
          codeSpan.style.color = "red"
          codeSpan.style.fontSize = "20px"
          codeSpan.style.background = "gray"
          codeSpan.style.fontStyle = "italic"
          codeSpan.style.textDecoration = "line-through"
          codeSpan.innerHTML = mess;
          codeSpan.value = mess;
      }
    </script>
</head>
<body onload="createCode()">
   <span id="codeSpan"></span><a href="#" onclick="createCode()">看不清楚</a>
</body>
</html>