BOM(Broswer Object Model)
方法:
框窗 1.警告框 window.alert("msg"); 2.确认框 window.confirm("msg"); 3.询问框 window.prompt("msg","defaulvalue") 页面 1.打开一个窗口 window.open() 2.在子窗口中使用,表示父窗口的window对象 window.opener 3.关闭当前窗口 window.close()定时任务 1.定时任务 var taskid = window.setTimeout(function,ms); 2.间隔执行任务 var taskid = window.setInteval(function,ms); 3.清除定时任务 window.clearTimeout(taskid); 4.清除间隔执行任务 window.clearInteval(taskid);
DOM(Document Object Model):
结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。 结点类型 1.元素结点 2.属性结点 3.文本结点 结点的注意点: 1.文本节点和属性结点都看作元素结点的子结点 2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用“结点”称呼它 3.结点的关系有:父子关系、兄弟关系1.获取元素结点
1)直接获取 ① document.getElementById() ② document.getElementsByName() ③ document.getElementsByTagName() 2)间接获取 父子关系 firstChild lastChild childNodes 子父关系 parentNode 兄弟关系 nextSibling previousSibling2.操作属性结点
1)通过对象“.”属性,来操作属性 优:可以动态获取用户修改的属性值 缺:不能获取自定义属性的值 2)getAttribute("key") setAttribute("key","value") removeAttribute("key") 优:可以获取自定义属性的值 缺:不能动态获取用户修改的属性值3.处理文本结点
1) 通过对象.innerText 获取标签内部的文本信息 2) 通过对象.innerHTML 获取标签内部的HTML代码4.动态改变DOM结构
1)创建一个结点对象 document.createElement("标签名") 2)(父结点)追加子结点对象 fatherNode.appendChild(子结点对象) 3)(父结点)在指定结点前添加子结点 fatherNode.insertBefore(新结点对象,参考结点对象) 4)(父结点)替换旧的子结点对象 fatherNode.replaceChild(新结点对象,旧结点对象) 5)(父结点)删除旧子结点对象 fahterNode.removeChild(旧结点对象)5.动态改变元素的CSS样式(不重要)
1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称 2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)