JS操作BOM(一)

1.什么是BOM

            BOM:Document Object Model(文档对象模型)

2.BOM分为:

             1.BOM Core  2.HTML-BOM 3.CSS-BOM

3.节点和节点关系(结构排序之后像家族谱一样判断关系)

             文档:dpcument

              根节点:<html>

                  (父节点)<html>                                                                 (父节点)<body>

                  (子节点)<title>                                  (子节点)       <img>            <h1>                  <p>

4.使用getElement方法访问指定节点 、 根据层次关系访问节点

                   1.getElementById()

                   2.getElementsByName()

                   3.getElementsByTagName()

5.节点的属性有:(使用getElement方法调用)

    1.parentNode

    2.chileNodes

    3.firstChlid  (第一个子节点)

    4.lastChild (最后一个子节点)

     5.nextSibling  (下一个)

    6.previousSibling (上一个)

6.根据层次关系访问节点

            1.firstElementChild

            2.lastElementChild

            3.nextElementSibling

            4.previousElementSibling

                  示例:

                      document.getElementById("").firstElementChild.innerHTML || document.getElementById("").fristChild.innerHTML;

7.节点信息

            1.nodeName    节点名称

            2.nodeValue     节点值

            3.nodeType     节点类型

8.操作节点

            1.操作节点的属性

                  示例:

                        getAttribute("属性名");

                        setAttribute("属性名","属性值");

            2.创建和插入节点

                  createElement(aa)  创建一个标签名为aa的新元素节点

                  A.appendChild(B)    把B节点追加至A节点的末尾

                  insertBefore(A,B)    把A节点插入到B节点之前

                  cloneNode(deep)    复制某个指定的节点

            3.删除和替换节点

                  removeChild(node)   删除指定的节点

                  replaceChild(newNode,oldNode)   用其他节点替换指定的节点

                 示例:

                      var aa = document.getElementByld("first");

                        delNode.parentNode.removeChild(delNode);

            4.操作节点样式

            5.获取元素的样式

原文地址:https://www.cnblogs.com/zhx2654188344/p/13160023.html