js基础之BOM和DOM

一.   BOM

1.      window对象

       1) 　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

　　     全局变量是 window 对象的属性。全局函数是 window 对象的方法。

      2)常用的window方法

            window.innerHeight  -----  浏览器窗口的内部高度

            window.innerWidth   ------  浏览器窗口的内部宽度

            window.open()       -----   打开新窗口

            window.close()       -----   关闭窗口

 

2.      window的子对象

1)      location

作用:用于获得当前页面的地址(URL),并把浏览器重定到新的页面.

常用属性和方法:

               location.href   获得URL

               location.href=’路径’  跳转到指定页面

               location.reload()     重新加载刷新页面

 

2)      弹出框  3种

第一种:警告框

               alert(‘内容’);

               经常用于确保用户可以得到某些信息,当出现警告框时,需点确定才能进行别的操作.

 

第二种:确认框   了解

               confirm(‘内容’)

               用于验证或者接收某些信息.点确认返回true,点取消返回flase

 

第三种.提示框  了解

               prompt(‘用户输入的内容’,’默认内容’);

               用于提示用户在页面输入某个值.

               输入完内容之后点确认返回输入内容,点取消返回空字符串.

                 

3)      计时相关

  1.setTimeout(‘js语句’,毫秒)            一段时间之后做一些事情

            第一个参数一般是写function函数,不然不会过一段时间,先执行了这个js语句.

        clearTimeout()         取消一段时间后要做的事情

 

2.setInterval(‘js语句’,时间间隔)            每隔一段时间做一些事情

  clearInterval(必须有setInterval()返回的id值)

var t=setInterval(function f(){console.log('我是setInterval')},3000);

                                     clearInterval(t);

 

二.   DOM

1.      什么是DOM

　DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。 

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

　　HTML DOM 模型被构造为对象的树。

 

 

　　DOM标准规定HTML文档中的每个成分都是一个节点(node)：

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)　

 

　　JavaScript 可以通过DOM创建动态的 HTML：

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）

2.查找标签     (想要操作该标签,需要先查找)

     1)直接查找

          document.getElementById(‘id’)      根据id获取一个标签

          document.getElementsByClassName(‘类名’)    根据class属性获取标签,可以多个,是以数组的形式

          document.getElementsByTagName(‘标签名’)   根据标签名获取标签集合

     2)间接查找

          parentElement       父节点标签元素

children                所有子标签

firstElementChild      第一个子标签元素

lastElementChild       最后一个子标签元素

nextElementSibling     下一个兄弟标签元素

previousElementSibling  上一个兄弟标签元素

查找出来的内容是个数组,那么就可以通过索引来取对应的标签对象

 

 

3)节点操作

         1.创建节点(就是创建标签)  createElement

                  var  Ele=document.createElement(‘标签’);

 

         2.添加节点

                  1)追加一个节点(作为最后的子节点)

                          父节点.appendChild(新节点);

                  2)把追加的节点放到某个节点的前面

                          父节点.insertBefore(新节点,某个节点);

 

         3.删除节点

        父节点.removeChild(某个节点);

                 

         4.替换节点

                  父节点.replaceChild(新节点,某个节点);

 

         5.属性节点

                  1)获取文本节点的值:

                          获得的标签.innerText       获取该标签内以及子标签内的所有内容

                          获得的标签.innerHTML                  获取标签内以及字标签内的所有内容,包括子标签名.

                  2)设置文本节点的值:

                                   获得的标签.innerText =’1’;        标签添加内容

                                   获得的标签.innerHTML         =’<标签>内容</标签>’;    标签添加子标签,如果之前有字标签,会全部覆盖

         6.attribute(属性)操作

            获取的标签.setAttribute(‘name’:’大白’);

                          获取的标签.getAttribute (‘name’);

                          获取的标签.removeAttribute (‘name’);

// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的 imgEle.src

imgEle.src="..."

 

7.获取值操作    获取的标签.value

                                   标签 input,select,textarea ,这些标签用户输入的内容能够被获取

 

                  8.class操作

                                   获取的标签.className                    获取标签的类名class

                                   获取的标签.classList.remove(获取的标签的类名)     删除指定类

                                                       .classList.add(类名)                 添加类

                                                       .classList.contains(类名)            查看类名是否存在,存在返回true,否则flase

                                                       .toggle(类名)            类名存在就删除,不存在就添加

 

 

                  9.指定css操作

                          规律:

                                   1.对于没有中横线的css属性一般直接使用style.属性名即可

                                                     obj.style.margin

obj.style.width

obj.style.left

obj.style.position

                                   2.对含有中横线的css属性,将中横线后面的第一个字母大写即可

                                                     obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily

       

        10.事件

            1)常用事件

 

 

 

                  2)绑定方式

                          方式1:不常用了

                                  

 

                          方式2: