博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bom ,dom
阅读量:5226 次
发布时间:2019-06-14

本文共 1504 字,大约阅读时间需要 5 分钟。

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

 

转载于:https://www.cnblogs.com/moyulove/p/10815742.html

你可能感兴趣的文章
CSS3教程:border-image属性
查看>>
asp.netmvc常见功能链接
查看>>
sql server系统表详细说明
查看>>
SQL Server 2008连接字符串写法大全
查看>>
sql server 使用链接服务器远程查询
查看>>
JavaScript中的继承
查看>>
MySQL简介
查看>>
设计模式之桥接模式(Bridge)
查看>>
转:探讨跨域请求资源的几种方式
查看>>
jquery的$(document).ready()和onload的加载顺序
查看>>
Python Web框架Django (五)
查看>>
.net学习之继承、里氏替换原则LSP、虚方法、多态、抽象类、Equals方法、接口、装箱拆箱、字符串------(转)...
查看>>
Android 开发 ThreadPool(线程池) 总结
查看>>
【poj1568】 Find the Winning Move
查看>>
【codevs1033】 蚯蚓的游戏问题
查看>>
TP框架中的page分页实现
查看>>
[转]跨越千年的RSA算法
查看>>
传奇学者应明生
查看>>
【程序执行原理】
查看>>
第二次项目冲刺(Beta阶段)5.24
查看>>