JavaScript+DOM编程艺术(总结)

原创 IsYang 随笔 书籍总结 127阅读 11 天前 举报

DOM -> D(document,文档)-> O (object,对象) -> M(Model,模型)

  • 对象
    • 用户定义对象
    • 内建对象
      * 数据封装类对象:Object,Array, Boolean, Number, String
      * 工具类对象:Math, Date, RegExp
    • 宿主对象
      * Window和Document
      
      * Form, Image,Element,获得关于某给定网页上的表单,图像和各种表单元素的信息
  • 节点
    • nodeType 总共12种可取值,仅有3种具有使用价值
      • 元素节点 (属性值是1)
        • 属性节点 如title = “xxx”(属性值是2)
        • 文本节点 如 xxxx(属性值是3)
    • childNodes 某个元素下的全部的子节点,返回一个数组
    • nodeValue 检索和设置节点的值
    • firstChild 等价 node.childNodes[0] 访问数组的第一个元素
    • lastChild 等价 node.childNodes[node.childNodes.length - 1] 访问数组的最后一个元素
  • DOM方法
    • document.createElement(element) 创建一个新的元素节点
    • document.createTextNode(text) 新建文本节点所包含的文本字符串
    • node.cloneNode(boole) 取值为true或false
      • true: 新节点将包含着与被复制节点完全一样的子节点
      • false: 新节点将不包含任何子节点,如果被复制节点是一个元素节点,意味着包含在被复制节点里的所有子节点将不会被复制
    • element.appendChild(newChild) 将给元素节点追加一个子节点
    • element.insertBefore(newNode, targetNode) 将把一个给定节点插入到一个给定元素节点的给定子节点的前面

      例如:
      var container = document.getElementById("content");
      var message = document.getElementById("fineparint");
      var para = document.createElement("p");
      var text = document.createTextNode("here comes the fineprint");
      para.appendChild(text);
      container.insertBefore(para, message);

          把创建的新元素插入到content元素所包含的fineprint元素的前面
    • element.removeChild(node) 从给定元素里删除一个子节点
    • element.replaceChild(newChild, oldChild) 将把一个给定父元素里的一个子节点替换为另一个节点
    • element.setAttribute(attributeName, attributeValue) 将为给定元素节点添加一个新的属性值或改变它的现有属性的值
    • element.getAttribute(attributeName) 获取给定元素的属性节点的值
    • element.getElementById(ID) 寻找一个给定id名的元素
    • element.getElementsByClass(class) 寻找一个给定class名的元素
    • element.getElementsByTagName(tagName) 寻找一个给定属性标签的元素
    • element.hasChildNodes 检查一个给定元素是否有子节点,返回true或false
  • DOM属性
    • node.nodeName 返回给定节点的名字
    • node.nodeType 返回给定节点的类型
    • node.nodeValue 返回这个属性的值
    • node.childNodes 返回一个数组,这个数组由给定元素节点的子节点构成
    • node.firstChild 返回一个给定元素节点的子节点
      • 相当于 node.childNdes[0]
    • node.lastChild 返回一个给定元素节点的最有一个子节点
      • 相当于 node.childNodes[elementBode.childNodes.length -1]
    • node.nextSibling 返回一个给定节点的下一个子节点
    • node.parentNode 返回一个给定节点的父节点
    • node.previousSibling 返回一个给定节点的下一个子节点
公共代码
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复