前端基础之BOM和DOM

Posted 2021-01-04 kcwxx

---恢复内容开始---

今日内容大纲:

一.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.添加节点

语法:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---恢复内容结束---