zoukankan      html  css  js  c++  java
  • DOM

    一. DOM
    1. 什么是DOM
    Document Object Model(文档对象模型)
    缩写:DOM
    针对于HTML和XML文档提供的API(应用程序接口)
    DOM描述的是层次化的节点树(倒置的树),开发人员使用DOM对节点进行增加、删除、修改、获取
    2. DOM树
    也叫节点树
    DOM树中所有的节点可以通过JS访问,都可以被增加、删除、修改、查看
    文档中的一切都是节点
    3. 节点类型
    html文档中的一切都是节点(node)
    整个文档是一个文档节点 document
    文档中可见的每一个HTML元素都是元素节点
    文档中的所有文本都是文本节点(空格回车都是文本节点)
    文档中的每一个HTML元素的属性都是属性节点 src id class
    文档中的所有注释都是注释节点 <!-- -->
    4. DOM节点关系
    1)子节点
    仅对儿子有效,不能获取孙子
    childNodes获取所有的子节点,包括文本节点,注释节点
    children 获取标签类型的子节点
    2)父节点
    parentNode:父亲节点,只有一个
    3)兄弟节点
    下一个兄弟
    nextSibling
    获取下一个任意类型的兄弟节点
    nextElementSibling
    获取下一个元素类型的兄弟节点
    上一个兄弟
    previousSibling
    获取上一个任意类型的兄弟节点
    previousElementSibling
    获取上一个元素类型的兄弟节点
    4)第一个最后一个儿子节点
    第一个子节点
    firstChild: 获取第一个任意类型的子节点
    firstElementChild: 获取第一个元素类型的子节点。
    最后一个子节点
    lastChild: 获取最后一个任意类型的子节点
    lastElementChild: 获取最后一个元素类型的子节点。
    5)属性节点
    getAttributeNode: 从当前元素中获取某个属性节点
    结构:
    <div id="d1">
    <div class="d2"></div>
    </div>
    <p></p>
    <!-- 注释 -->
    你好
    js:
    1)在控制台输出所有body子节点
    2)在控制台输出body所有元素类型的子节点
    结构:
    <ul>
    </ul>
    <div>
    <span>x</span>
    <img src="">
    </div>
    js:
    1) 获取ul的父节点,输出到控制台
    2)获取第一个li的父节点,输出到控制台
    3)点击‘x’按钮,隐藏父元素
    结构:
    <ul id="">
    <li class="">123</li>
    <!--comment-->
    hello
    <li>你好</li>
    <li>456<span>span标签</span></li>
    <li>hello</li>
    </ul>
    js:
    1)获取第一个li的下一个兄弟节点,输出到控制台
    2)获取第一个li的下一个兄弟节点(元素),输出到控制台
    3)获取第二个li的上一个兄弟节点,输出到控制台
    4)获取第二个li的上一个兄弟节点(元素),输出到控制台。
    案例:(04.第一个和最后一个节点.html)
    结构:
    <ul id="">
    <li class="">123</li>
    <!--comment-->
    hello
    <li>你好</li>
    <li>456<span>span标签</span></li>
    <li>hello</li>
    </ul>
    js:
    1)获取ul的第一个子节点,输出到控制台
    2)获取ul的第一个子节点(元素),输出到控制台
    3)获取ul的最后一个子节点,输出到控制台
    4)获取ul的最后一个子节点(元素),输出到控制台
    结构:
    <div class="d1" id="hello" abc="t"
    b = "bbb">hello</div>
    js:
    1)控制台输出div的class属性节点
    2)控制台输出div的id属性节点
    3)控制台输出div的abc属性节点
    4)控制台输出div的b属性节点
    5)控制台输出div的a属性节点

  • 相关阅读:
    使用SandCastle生成代码注释文档
    如何修改默认的ModelState错误提示:字段{0}必须是一个数字
    2011总结 致:过去的30年
    CentOS下安装、配置Nginx,配合IIS做负载均衡
    灵活应用js调试技巧解决样式问题
    扩展IList对象,实现深拷贝扩展方法
    IE8对JS数组,采用属性遍历的解析差异
    如何开始Github
    Response.Clear 还是 Response.ClearHeaders
    URLRoutingModule如何处理静态文件?
  • 原文地址:https://www.cnblogs.com/yangjingyang/p/10210458.html
Copyright © 2011-2022 走看看