zoukankan      html  css  js  c++  java
  • 公司内部的一篇关于dom方法的分享

    第一部分 dom

                                  node类型

    nodeType 属性

    nodeType 属性返回节点的类型。nodeType 是只读的。

    比较重要的节点类型有:

    元素类型

    NodeType

    元素

    1

    属性

    2

    文本

    3

    注释

    8

    文档

    9

    if  (someNode.nodeType == 1)  { //适用于所有浏览器

         ...

    }

    nodeName 属性

    nodeName 属性规定节点的名称。

    - nodeName 是只读的

    元素节点的 nodeName 与标签名相同

    属性节点的 nodeName 与属性名相同

    文本节点的 nodeName 始终是 #text

    文档节点的 nodeName 始终是 #document

    注释:nodeName 始终包含 HTML 元素的大写字母标签名。

    if  (someNode.nodeType == 1)  {

       value = someNode.nodeName   //nodeName的值是元素的标签名

    }

    nodeValue 属性

    nodeValue 属性规定节点的值。

    元素节点的 nodeValue 是 undefined 或 null

    文本节点的 nodeValue 是文本本身

    属性节点的 nodeValue 是属性值

    每个节点都有一个childNodes属性,其中保存着一个NodeList对象。(NodeList是一个类数组对象,不是Array的实例)

    someNode.firstChild =someNode.childNodes[0] = someNode.childNodes.item(0)

    someNode.lastChild = someNode.childNodes[someNode.childNodes.length-1]

    hasChildNodes() //检测有没有子节点

    var returnNode = someNode.appendChild(someNode.firstChild) //在第一个子节点后append

    insertBefore(newNode, null) //append()方法一致

    insertBefore(newNode, someNode.firstChild) //在特定位置添加节点

    replaceChild(newNode, someNode.firstChild) //替换节点

    removeChild(someNode.firstChild)  //移除节点

    replaceChild(newNode, someNode.childNodes[someNode.length-2])  //删除倒数第二个元素

    cloneNode()  //接收一个参数,true(为深复制,复制节点以及子节点树),false(只复制节点本身)

    <ul>

         <li>item1</li>

         <li>item2</li>

         <li>item3</li>

    </ul>

    var deepList =mylist.cloneNode(true)

    console.log(deepList.childNodes.length)   //3(ie<9) 7(其他浏览器)

    [text, li, text, li, text, li, text]

    console.log(deepList.children.length)  //3

    [li, li, li]

    console.log(deepList.childNodes.length) //

    var shallowList =mylist.cloneNode(false)

    console.log(shallowList .childNodes.length)   //0

    IE9之前的版本不会为空白符创建节点,cloneNode()方法不会复制dom节点的javascript属性,例如事件处理,但iebug,建议复制前移除事件

    Document类型

    var allElements = document.getElementByTagName("*") //所有元素

    document.forms document.images

    document.links   //带有href特性的<a>元素

    Element类型

    1.HTML元素

    var div= document.getElementById("myDiv")

    console.log(div.id)

    console.log(div.className)

    console.log(div.title)

    console.log(div.dir)

    2.取得特性

         getAttribute()  setAttribute()  removeAttribute()

         <div id="myDiv" align="left" my_special_attribute="hello!"

         console.log(div.my_special_attribute) //undefined (ie除外)

         div.mycolor = "red"

         console.log(div.getAttribute("mycolor")) //null ie除外)

                                                                         DOM扩展

      选择符

         querySelector() querySelectorAll()   //ie8+

            matchesSelector() //接受参数,css选择符,如果调用元素与该选择符匹配,返回true,否则,返回false   p288

        与类相关的扩充

            getElementsByClassName() //ie9+ document对象上调用始终会返回与类匹配的所有元素,在元素上调用改方法只会返回后代元素中匹配的元素

             //删除"disabled"

            div.classList.remove("disabled")

             //添加"current"

             div.classList.add("current")

              //切换"user"

             div.classList.toggle("current")

              //确定元素中是否包含既定类名

              if (div.classList.contains("bd"))

              Firefox 3.6+Chrome

    location修改URL的方法

    初始urlhttp://www.baidu.com/wechart/

    url修改为 http://www.baidu.com/#section1

    location.hash = "#section1";

    url修改为 http://www.baidu.com/wechart/?q=javascript

    location.search= "?q=javascript";

    url修改为 http://www.yahoo.com/wechart/

    location.hostname= "www.yahoo.com";

    url修改为 http://www.yahoo.com/mydir/

    location.pathname= "mydir";

    url修改为 http://www.yahoo.com:8080//wechart

    location.port = 8080;

  • 相关阅读:
    设计模式系列
    【ABAP系列】SAP ABAP 关于FUNCTION-POOL的理解
    【MM系列】SAP S/4 HANA 1511的BP角色创建及供应商数据的创建方法
    【ABAP系列】SAP ABAP 动态指针
    【HR系列】SAP HR PA信息类型的创建与增强
    【HANA系列】SAP UI5上传图片 用XSJS存储在HANA中的方法
    【HANA系列】SAP Vora(SAP HANA和Hadoop)简析
    【MM系列】SAP SAP库龄报表逻辑理解
    【HANA系列】SAP HANA XS Administration Tool登录参数设置
    【ABAP系列】SAP 一个完整的SAP的Abap例子(idoc,edi文件的相互转换)
  • 原文地址:https://www.cnblogs.com/wunan/p/5056303.html
Copyright © 2011-2022 走看看