BOM与DOM

BOM(Broswer Object Model)

方法:
框窗
1.警告框
window.alert("msg");
msg:表示语句或者字符串
Demo:
2.确认框
window.confirm("msg");
3.询问框
window.prompt("msg","defaulvalue")
Demo:function testPrompt(){
prompt("请输入U盾密码",例如:123456)
}
效果如下:弹出一个可输入的小框,默认值为:例如:123456,有返回值,返回值即为输入的值

页面
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 previousSibling

2.操作属性结点
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的关键字,并能作为属性名存在)

你可能感兴趣的:(BOM与DOM)