zoukankan      html  css  js  c++  java
  • 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.获取元素的样式

  • 相关阅读:
    01: Django rest framework 基础
    配置java环境 启动服务
    配置文件详解
    介绍
    所有的编译安装包
    mysql 二进制安装
    使用Python 、 go 语言测试rabbitmq的工作机制
    Haproxy + Rabbit 集群 简要介绍
    rabbitmqctl 的常用命令
    虚拟主机介绍
  • 原文地址:https://www.cnblogs.com/zhx2654188344/p/13160023.html
Copyright © 2011-2022 走看看