zoukankan      html  css  js  c++  java
  • Javascript高级程序设计第二版第十章DOM笔记

    今天给诸位分享一下,js高级程序设计第二版,第十章
    有人会说,为什么没有第九章呀,
    因为第九章是浏览器检测,哥直接略过了。
    第十章 DOM
    如果说BOM是一个页面内html以外的东西,那么dom就是页面内html以内的东西。
    一般的结构可以这样理解:
    document -> html -> head + body

    所以,好多的方法document.getElementById,document.getELmenetsByTagName,document.getElementsByName 都是从这儿来的。

    而且以上属性只有getElementById,element后面没有s,其它的都有s,复数形式嘛。

    dom 的结构有几种复杂的关系:
    一般是:本身而言,上有父:parentNode,下有子:childeNodes,平辈的还有兄弟姐妹,哥有:previousSibling,
    弟有:nextSlibling,长子有:firstChild,末弟有:lastChild
    操作 dom 的几大 curd 法宝:
    c: 有appendChild,根据先有节点添加节点。createElement,未知节点创建节点.创建后在把他们添加到body节点上。还有个insertBefore代码实现为:document.body.appendChild(element);
    u: replaceChild(newNode, oldNode);替换修改节点
    r: 查找,getElmentById,getElementsByTagName,getElementsByName,
    d: removeChild 删除节点
    还有就是节点有几大类型检测。

    换句话说,节点的三大属性,
    nodyType,nodeName,nodeValue;
    常用的是nodyType,
    比如:<p id="haoqing">haoqing</p>
    这个,
    就是
    nodeType = 1 是p元素
    nodeType = 2 id=haoqing 属性节点

    nodeType = 3 haoqing 文本节点

      8 是注释节点,9 是文档节点 11是文档片断
    还有一个节点属性,
    cloneNode(true | false)
    复制节点,true 会复制子节点,false 不会复制。一般称复制子节点为深度复制。
    还有几个重要的属性,innerText inerHTML,outText,
    几个浏览器通用的是 innerHTML,其它的都是only ie,可以不加关注。
    而innerHTML的各个浏览器的解析也是不一样的。
    一般,前端面试会问到 node 是如何 curd,如何移动的。

  • 相关阅读:
    5.4 类型转换
    IntelliJ IDEA 创建Web项目(全教程)
    Spring IoC 依赖注入的方法大全 XML配置方式
    20秒教你如何写maven2的pom文件的依赖包
    数据库面试题之COUNT(*),COUNT(字段),CONUT(DISTINCT 字段)的区别
    Oracle中的单行函数
    Select 子句后的别名,在where条件中不能使用
    Oracle SQL*Plus命令
    使用js请求Servlet时的路径
    idea 创建运行web项目时,报错: Can not issue executeUpdate() for SELECTs解决方案
  • 原文地址:https://www.cnblogs.com/jikey/p/1804245.html
Copyright © 2011-2022 走看看