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对象
- 表示整个对象
- 常用方法
- write()方法：a. 向页面输出变量 b. 向页面输出html代码
- getElementById():通过id得到标签，返回对象
// getElementById() 通过id得到标签
var input1 = document.getElementById("name");
//得到input的value值
alert(input1.value);
//向input中设置一个值value
input1.value = "cccc";
- 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/>");
}
- getElementsByTagName(): 通过标签名称得到标签，返回集合或数组
// 演示getElementsByTagName方法
var input3 = document.getElementsByTagName("input");//传递的参数是标签名称
alert(input3.length);
for (var i = input3.length - 1; i >= 0; i--) {
alert(input3[i].value);
}
- 注意：只有一个标签或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的方法获取
- 方法：
- getAttribute(): 获取的值
//获取input标签
var input1 = document.getElementById("inputid");
alert(input1.value);
alert(input1.getAttrinute(value));
- setAttribute(name,value);
- removeAttribute(name); 无法删除value
- 获取标签下的子标签
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'里面的标签，属性，文本都封装成对象
- 标签节点对应的值
nodeType：1
nodeName：大写的标签名称 eg:SPAN
nodeValue: null - 属性节点对应的值
nodeType：2
nodeName：属性名称
nodeValue: 属性的值 - 文本节点对应的值
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);
