前端基础之BOM和DOM

Posted kcwxx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端基础之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.添加节点

语法:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

以上是关于前端基础之BOM和DOM的主要内容,如果未能解决你的问题,请参考以下文章

前端基础之BOM和DOM

前端基础之BOM和DOM

前端基础之BOM和DOM

前端基础之BOM和DOM

前端基础之BOM和DOM

30.Python前端基础之BOM和DOM