前端基础之BOM和DOM
---恢复内容开始---
今日内容大纲:
一.window对象
二.window子对象
1.navigator对象(了解即可)
2.screan对象(了解即可)
3.history对象(了解即可)
4.location对象
5.弹出框
1>警告框
2>确认框
3>提示框
6.计时相关
三.HTML DOM树
四.查找标签
1.直接查找
2.间接查找
五.节点操作
1.创建节点
2.添加节点
3.删除节点
4.替换节点
5.属性节点
6.获取值操作
7.class操作
8.指定css操作
六.事件
1.常用事件
2.绑定方式
今日内容;
一.window对象
所有浏览器都支持window对象,表示浏览器窗口
所有JavaScript全局对象,函数以及变量均自动成为window对象的成员
全局变量是window对象的属性.全局函数是window对象的方法.
接下来要讲的HTML DOM的document也是window对象的属性之一
一些常用的window方法:
window.innerHeight----浏览器窗口的内部高度
window.innerWidth ---- 浏览器窗口的内部宽度
window.open() ---- 打开窗口
window.close() --- 关闭窗口
二.window的子对象
1.navigator对象(了解即可)
navigator.appName // Web浏览器全称 navigator.appVersion //Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platForm // 浏览器运行所在的操作系统
2.screen对象(了解即可)
screen.availWidth // 可用的屏幕宽度 screen.avaiHeight // 可用的屏幕高度
3.history对象(了解即可)
window.history 对象包含浏览器的历史.
浏览器历史对象,包含了用户对当前页面的浏览器历史,但我们无法查看具体的地址,可以简单的用来前进或后退一个页面.
history.forward() // 前进一页 history.back() // 后退一页
4.location对象
window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面.
location.href // 获取URL location.href = "URL" //跳转到指定页面 location.reload() // 重新加载页面
5.弹出框
可以在JavaScript 中创建三种消息框 : 警告框,确认框,提示框.
1>警告框
当警告框出现后,用户需要点击确认按钮之后才能继续进行操作.
alert("你看到了吗?")
2>确认框(了解即可)
当确认框出现之后,需要用户点击确认按钮或者取消按钮之后才能继续进行操作.
如果用户点击确认,那么返回值为True,如果用户取消,那么返回False
confirm("你确定吗?")
3>提示框(了解即可)
当提示框出现的时候,用户需要输入某个值,然后点击确认或取消按钮才能继续操作.
如果点击确认,返回输入内容. 如果点击取消,则返回null
prompt("请在下方输入","你的答案")
6.计时相关
1> setTimeout() -----过多少秒做一件什么事
语法:
var t = setTimeout("JS语句",毫秒)
2>clearTimeout() ----- 在事件没有发生之前可以停止
语法:
clearTimeout(setTimeout_variable) 举例子: // 在指定时间之后执行一次相应函数 var timer = setTimeout(function(){alert(123);},3000) //取消setTimeout 设置 clearTimeout(timer);
3> setInterval() -------- 过多长时间,循环做一件事情
语法:
setInterval("JS语句",时间间隔)
返回值: 一个可以传递给window.clearInterval()从而取消对code的周期性执行的值.
4>clearInterval()
clearInterval()方法可取消由setInterval()设置timeout
clearInterval() 方法的参数必须是由setInterval()返回的ID值
语法:
clearInterval(setInterval返回的ID值) 举例子: // 每隔一段时间执行一次相应函数 var timer = setInterval(function(){console.log(123):},3000) //取消setInterval设置 clearInterval(timer);
三.HTML DOM树
DOM标准规定HTML文档中的每个成分都是一个节点:
文档节点:代表整个文档
元素节点:代表一个元素
文本节点:代表元素中的文本
属性节点:代表一个属性,元素才能属性
注释是注释节点
JavaScript 可以通过DOM创建动态的HTML:
JavaScript 能够改变页面中的所有HTML元素
JavaScript 能够改变页面中的所有HTML属性
JavaScript 能够对页面中的所有的事件做出反应
四.查找标签
1.直接查找
document.getElmentById //根据id获取一个标签 document.getElementsByClassName //根据class属性获取 document.getElementsByTagName //根据标签名获取标签名集
注意:
涉及到DOM操作的JS代码应该放在文档的哪个位置.
2.间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
五.节点操作
1.创建节点
语法:
createElement(标签名) 示例: var divEle = document.createElement("div");
2.添加节点
语法:
---恢复内容结束---
