BOM和DOM知识点

0 .对象 在 JavaScript 中，对象是⼀组⽆序的相关属性和⽅法的集合，所有的事物都是对象，例如字符 串、数值、数组、函数等。 对象是由属性和⽅法组成的。 属性：事物的特征，在对象中⽤属性来表示（常⽤名词） ⽅法：事物的⾏为，在对象中⽤⽅法来表示（常⽤动词） 定义对象： var obj = {name:"张三",age: 18 ,sex:'⼥'} 对象属性的增删改 1. 点语法 增加属性 obj.weight = 80 obj.height = 130 删除属性 delete obj.weight 改变属性 obj.name = '李四' 2. []语法 obj["weight"] = 80 ----> 增加属性 delete obj["weight"]---->删除属性 obj['name'] = '李四'---->改变属性 为什么需要对象？ 如果要保存⼀个⼈的完整信息呢？例如，将“张三疯”的个⼈的信息保存在对象中的⽅式为： var obj = {name:"张三",age: 18 ,sex:'⼥',say:function(){}} 对象的遍历： for(var k in obj){ k代表的是键名。obj[k]代表值 } 1 .BOM ● ● Broswer Object Model 浏览器对象模型 window对象常⽤的属性和⽅法： 三个d出框 : 特点阻塞代码执⾏ alert("内容") d出框 confirm("提示信息") 确认框 确定返回true 取消返回false prompt("提示信息") 输⼊框 返回数值为字符串 两个定时器： setInterval（执⾏任务，间隔时间）: 连续执⾏定时器 clearInterval() setTimeout(执⾏任务,间隔时间): ⽤法同上 只执⾏⼀次 延时性 clearTimeout() 停⽌定时器(⼀般 ⽤的不太多) ⼀个d出窗⼝⽅法 : open("路径","窗⼝的名称没有什么意义"，"d出窗⼝的外观") : 返回值是d出的⼦窗⼝外观主要考虑:width height left top 关闭窗⼝close() 在主窗⼝中打开⼀个窗⼝ window.open("sub.html"); 关闭当前窗⼝ window.close(); 三个事件 ： onload事件:onload 事件会在⻚⾯或图像加载完成后触发 onscroll事件:onscroll事件当⻚⾯滚动时触发函数体 onresize事件:onresize事件当⻚⾯窗⼝变化时触发函数体 2 2 .location 地址对象 ⻚⾯跳转： href属性：代表当前⽹⻚地址，location.href 可读写。 location.href = '地址';跳转到这个地址 location.replace("http://www.baidu.com"); 覆盖原先⽹⻚ 没有浏览痕迹 ⻚⾯刷新：location.reload(); 刷新 function fun(){ location.reload(); } 3 .history 地址对象 history对象包含⽤户(在浏览器窗⼝中)访问过的 URL。 ⽅法 ： back() 加载 history 列表中的前⼀个 URL（前进） forward() 加载 history 列表中的下⼀个 URL（后退） go() 加载 history 列表中的某个具体⻚⾯，或者要求浏览器移动到指定的⻚⾯数量（负数为后退，正数 为前进） 4 .document ⽂档对象 每个载⼊浏览器的HTML ⽂档的标签都可以转为 Document 对象 document 对象使我们可以从js脚本中对 HTML ⻚⾯中的所有元素进⾏访问 document 对象是 window 对象的⼀部分，可通过 window.document 属性对其进⾏访问 document.getElementById() 返回对拥有指定 id 的第⼀个对象的引⽤。 document.getElementsByName() 返回带有指定名称的对象集合。 document.getElementsByTagName() 返回带有指定标签名的对象集合。 document.getElementsByClassName（） 通过类名返回 document.querySelector() 通过选择器 5 .DOM DOM（Document Object Model），⽂档对象模型 3 4 1. 获取元素 2. 更改元素样式 3. 更改元素内容 4. 更改元素属性