JS- Dom 和 Bom , Cookies

目录

bom对象：

navigator：获取浏览器的信息。

screen:获取显示屏的信息

location：请求url地址  设置url地址

history:请求的url的历史记录

window(重要)

dom基本操作（html文档）：

1.获取节点（document）：

2.节点指针：

3.节点操作：

创建节点:

插入节点：

        替换节点：

        复制节点：

         删除节点：

4.属性操作（Attribute）：

5. 文本操作：

Cookies:

         1.创建cookies:

2.读取cookies:

3.修改cookies:

4.删除cookies:

---

 

bom对象：

    简介：浏览器对象模型。

    哪些对象：

        navigator：获取浏览器的信息。

        screen:获取显示屏的信息

        location：请求url地址  设置url地址

            鼠标点击事件：οnclick=“js的方法”

        history:请求的url的历史记录

                             back():到访问的上一个页面

                             forward():到访问的下一个页面

        window(重要)

            属性：opener：得到创建这个窗口的窗口，可以跨页面操作

            窗口对象

            顶层对象（所有的bom对象都是在该里面操作的）

            方法：

                whindow.alert()                                                                页面弹出一个框，显示内容。简写 alert();

                congirm(“显示内容”)                                                         确认框

                prompt(“在显示的内容”，“输入框里面的默认值”)             输入对话框

                open():                                                                              打开一个新的窗口

                close():                                                                              关闭窗口（兼容性差）

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

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

                                    对于IE8，7，6，5:

                                                  document.body.clientHeight   /   document.documentElement.clientHeight

                                                   document.body.clientWidth   /   document.documentElement.clientWidth

 做定时器的一些方法（笔试会问）：

                **  setInterval(“js代码”，毫秒数)                                        表示每多少秒，执行一次js代码

                **  setTimeout(“js代码”，毫秒数)                                       表示在毫秒数之后执行，但是只会执行一次

                clearInterval(“由setInterval返回的ID”)                               清除定时器

                clearTimeout(“由setTimeout返回的ID”)                             清除定时器

 

 

dom基本操作（html文档）：

 dom：文档对象模型
    文档：超文本文档（超文本标记文档） html,xml,xhtml
    对象：提供了属性和方法
    模型：使用属性何方法操作超文本标记型文档    可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作
解析过程：根据html的层级结构，在内存中分配一个树形结构，需要把html中的每一个部分封装成对象。

1.         document对象：整个html文档
2.         element对象：标签对象
3.         attr  属性对象
4.         Text  文本对象
5.         Node节点对象（是上面这些对象的父对象）

    

 write（）方法：

            1）向页面输出变量（值）

            2）向页面输出html代码

 

1.获取节点（document）：

            getElementById: 通过元素id获取节点                                                                 document.getElementById(元素ID)

            getElementByName: 通过元素的name属性获取节点                                         document.getElementByName(元素name属性)

            getElementsByTagName:通过元素标签获取节点                                               document.getElementsByTagName(元素标签)

2.节点指针：

            firstChild:    获取元素的首个子节点。                                                                 父节点.firstChild

            lastChild: 获取元素的最后一个子节点。                                                             父节点.lastChild

            childNodes: 获取元素的子节点列表                                                                    父节点.childNodes

            previousSibling: 获取已知节点的前一个节点                                                      兄弟节点.previousSibling

            nextElementSibling: 获取已知节点的后一个节点                                                兄弟节点.nextElementSibling

获取已知节点的父节点                                                                                         子节点.parentNode

3.节点操作：

创建节点:

createElement: 创建元素节点                                                                             document.createElement(元素标签)

createAttribute: 创建属性节点                                                                            document.createAttribute(元素属性)

createTextNode: 创建文本节点                                                                          document.createTextNode(文本内容)

插入节点：

appendChild: 向节点的子节点列表的末尾添加新的子节点                                 appendChild(所添加的新节点)

           insertBefore: 在已知的子节点前插入一个新的子节点                                         insertBefore(所要添加的新节点，已知子节点)

        替换节点：

                replaceChild: 将某个子节点替换为另一个                                                      replaceChild(要插入的新元素，将被替换的老元素)

        复制节点：

                cloneNode: 创建指定节点的副本                                                                    需要被复制的节点.cloneNode(true/false)

                                       true：负值当前节点及其所有子节点               false:仅复制当前节点

         删除节点：

                removeChild: 删除指定的节点                                                                        removeChild(要删除的节点)

 

4.属性操作（Attribute）：

     获取属性：                getAttribute: 获取元素节点中指定属性的属性值        元素节点.getAttribute(元素属性名)

     设置属性：                setAttribute: 创建或改变元素节点的属性                   元素节点.setAttribute(属性名，属性值)

     删除属性：                removeAttribute: 删除元素中的指定属性                   元素节点.removeAttribute(属性名)

5. 文本操作：

（？？？）

            insertData(offset,String)    从offset指定的位置插入string

            appendData(string)            将string插入到文本节点的末尾处

            deleteData(offset,count)    从offset起删除count个字符

            replaceData(off,count,string)    从off将count个字符用string替代

            splitData(offset)            从offset起将文本节点分成两个节点

            substring(offset,count)        返回由offset起的count个节点

 

 

Cookies:

1.创建cookies:

                1.1  设置cookie

                document.cookie = "username=Miao";

                1.2 可以添加一个过期时间，默认情况下，cookie在浏览器关闭时删除

                document.cookie = "username=Miao; expires = Thu, 18 Dec 2019 12:00:00 GMT";

                1.3 可以使用path参数告诉浏览器cookie的路径，默认情况下，cookie属于当前页面

                document.cookie = "username=Miao; expires = Thu, 18 Dec 2019 12:00:00 GMT;path=/";

2.读取cookies:

                var x = document.cookie;

3.修改cookies:

                document.cookie = "新值(就会覆盖)";

4.删除cookies:

                将expires参数设置为 以前的时间， 1970.01.01 00：00：00

                document.cookie = "expires=Thu, 01 Jan 1970 00:00:00 GMT";