JS函数的重载

什么是重载？ 方法名相同，参数不同

• JS是否存在重载？
  --不存在，调用最后一个方法,把传递的参数保存到arguments里面
  -- 但是可以通过其他方式模拟重载 arguments

BOM browser object model 浏览器对象模型

有哪些对象？

• navigator 获取客户机的信息（浏览器的信息）
  navigator.appName
• screen 获取屏幕的信息
  screen.width/ screen .height
• localtion 请求url的地址
  href属性
  -- 获取到请求的url地址 location.href
  -- 设置url地址
  页面上设置一个按钮，绑定事件，点击页面跳转另一个页面
  <input type="button" value = "tiaozhuan" onclick="href1">
• history

    history.back()
    history.forward()

• window
  -窗口对象
  -顶层对象(所有的bom对象都是在windows里面操作的)
  方法：
  a. windows.alert() 页面弹窗，显内容
  b. windows.confirm() 确认框
  var flag = windows.confirm("显示的内容");
  c. prompt: 输入的对话框

        window.promp("pls input ：","0")
        window.promp("在显示的内容 ：","默认值")

d. open(): 可以打开一个新的窗口，
open("打开新窗口的地址","","窗口特征，比如高度和宽度")
-- 创建一个按钮，点击打开新的窗口

       window.open("JSDate.html","","width=200,height=300");

e. close()关闭窗口 浏览器兼容性差

      windows.close() 

f. 做定时器
--setInterval("JS代码"，“毫秒数”) 每3秒执行一次js代码

           window.setInterval("alert('123')","3000");

--setTimeout("JS代码"，“毫秒数”) 在毫秒数之后执行，只执行一次

          window.setTimeout(alert('12345'),"2000");

-- clearInterval() //清除setInterval

  var id1 =  window.setInterval("alert('123')","3000");
//通过setInterval会有一个返回值

-- clearTimeout() //清除setTimeout

DOM document object model： 文档对象模型

• 文档：超文本文档（超文本标记文档）html、xml
  对象：提供了属性和方法
  模型： 使用属性和方法操作不好文本标记型文档
  -- 可以使用js里面的dom提供的对象的属性和方法，对标记性文档进行操作
  -- 如何进行操作？ 首先 封装成对象（需要把html中的标签 属性文本内容都封装成对象）
  -- 要想对标记型文档进行操作，解析标记型文档
  -- 解析过程
  根据html的层级结构 在内存中分配一个树形结构 需要把html中的每部分封装成对象
  -document对象：整个文档
  -element对象：标签对象
  -属性对象
  -文本对象
  -- node对象，这些对象的父对象
  如果在对象里面找不到想要的方法 这个时候到Node对象里面去找
• DOM 模型和DHTML
  DOM的三种模型：
  -- level1 将html文档封装成对象
  -- level2 在level1的基础上添加新的功能，例如：对于事件和CSS样式的支持
  -- level3 支持xml11.0的一些新特性
• DHTML 是很多技术的简称：
  -HTML： 封装数据
  -css：使用属性和属性值设置样式
  -dom ：操作html文档
  -javascript：专门指的是js的语法语句（ECMAScript）

Document对象

• 表示整个对象
• 常用方法

1. write()方法：a. 向页面输出变量 b. 向页面输出html代码
2. getElementById():通过id得到标签，返回对象

   // getElementById() 通过id得到标签
    var input1 = document.getElementById("name");
    //得到input的value值
    alert(input1.value);
    //向input中设置一个值value
    input1.value = "cccc";

3. getElementsByName(): 通过标签的name的属性值得到标签，返回集合或数组

var input2 =  document.getElementsByName("byname");//传递的参数是name的属性值
    alert(input2.length);
    //遍历数组
    for (var i = input2.length - 1; i >= 0; i--) {
        document.write(input2[i].value);
        document.write("<br/>");

    }

4. getElementsByTagName(): 通过标签名称得到标签，返回集合或数组

//  演示getElementsByTagName方法
    var input3 = document.getElementsByTagName("input");//传递的参数是标签名称
    alert(input3.length);

    for (var i = input3.length - 1; i >= 0; i--) {
        alert(input3[i].value);
    }

5. 注意：只有一个标签或name，这个使用getEelementsByname(or TagName)返回的是一个数组，但是只有一个，可以直接数组下标获取值

var input3 = document.getElementsByTagName("input")[0];
alert(input3.value);

Window 练习

opener:可以得到创建这个窗口的窗口

        //实现input1方法
        fucntion input1(num1.nam1){
            //需要把num1 和nam1 复制到window页面，
            //跨页面的操作 opener:可以得到创建这个窗口的窗口

            var pwin = window.opener();
            pwin.document.getElementById("userId").value = num1;
            pwin.document.getElementById("userName").value = nam1;

            //关闭窗口
            wimdow.close();
        }

练习一：在末尾添加节点

• 获取到ul标签
• 创建li标签 document.createElement()
• 创建文本document.createTextNode()
• 将文本添加到li下 appendChild()
• 将li添加到ul下

            function add1(){
            //获取到ul标签
            var ul1 = document.getElementById("ulid");
            //创建标签
             var li1 = document.createElement("li");
            //创建文本
            var text1 = document.createTextNode("555");
            //文本加入li下面
            li1.appendChild(text1);
            //li加入ul末尾
            ul1.appendChild(li1);
        }

元素对象

• 要操作element对象，首先必须要获取到element，使用document的方法获取
• 方法：

1. getAttribute(): 获取的值

//获取input标签
    var input1 = document.getElementById("inputid");
    alert(input1.value);

    alert(input1.getAttrinute(value));

2. setAttribute(name,value);
3. removeAttribute(name); 无法删除value
4. 获取标签下的子标签
   a. 使用属性childNodes 但是兼容性很差
   b. 在Element对象中查找其他节点的唯一有效方法就是getElementByTagName()方法，返回一个集合

//获取到ul标签
        var ul2 = document.getElementById("ulid");
        //获取子标签

        var licount = ul2.getElementsByTagName("li");
        alert(licount.length);

Node对象属性一

• nodeName
• nodeType
• nodeValue
• 使用dom解析html的时候，需要html'里面的标签，属性，文本都封装成对象

1. 标签节点对应的值
   nodeType：1
   nodeName：大写的标签名称 eg:SPAN
   nodeValue: null
2. 属性节点对应的值
   nodeType：2
   nodeName：属性名称
   nodeValue: 属性的值
3. 文本节点对应的值
   nodeType：3
   nodeName：text
   nodeValue: 文本内容

Node对象属性二

• 父节点
  parentNode

//Node节点演示：得到li
        var li2 = document.getElementById("li11");
        //得到ul
        var ul22 = li2.parentNode;
        alert(ul22.id);

• 子节点
  childNodes：得到所有的子节点，兼容性很差
  firstChild：获取第一个子节点

var ul3 = document.getElementById("ulid");
        var li111 = ul3.firstChild;
        alert(li111.id);

lastChild：获取最后一个子节点

var ul3 = document.getElementById("ulid");
        alert(ul3.lastChild.id);

• 同辈节点
  nextSibling:返回给定节点的下一个兄弟节点
  previousSibling:返回给定节点的上一个兄弟节点

        var li33 = document.getElementById("li33");
        alert(li33.nextSibling.id);