zoukankan      html  css  js  c++  java
  • DOM的整个知识体系

    DOM说白了就是将HTML文档变成一个文档节点树,我们要学会的就是如何/查找节点 /修改节点/添加节点/创建节点/克隆节点/删除节点/替换节点/这几件事情。

     第一部分:获取某个你想操作的元素对象

    当然我们得从document对象出发去查找:

     第一种:作为document对象的属性存在(由于历史上一开始DOM就是用来处理表单和图片的,所以当时我们可以直接引用document的属性的形式)

    1.document.anchors(包含文档中所有带name属性的a元素) 

    2.document.applets(不做介绍)

    3.document.forms     (文档中所有的表单元素)

    4.document.images (文档中所有的图片)

    5.document.links   (文档中所有带有href属性的a元素) 

    第二部分:查找元素 

    下面说说我们经常使用的document对象中的一些方法来获取你需要操作的元素

     1. document.getElementById('XXX')                     获取元素的ID属性为XXX的元素

     2. document.getElementsByTagName('XXX')         获取标签为XXX的对象数组

     3. document.getElemenetsByClassName('XXX')     获取类为XXX的对象数组 

    第三部分:通过位置来获取相关元素 (通过node节点相关的方法来实现的)

    所有节点都继承于NODE 类型,所以他们都有下面这些属性:nodeType nodeName nodeValue

    nodeValue用于替换或者获取某个文本节点的值 

    前面说过了,DOM就是将HTML文档转换成节点树的形式而且都变成了相对应的对象。 

     某一节点:子节点:childNodes           注:这是个对象数组

                   父节点 :parentNode      

           下一兄弟节点:nextSibling

           前一兄弟节点:previousSibling

           第一个字节点:firstChild

           最后一个子节点:lastChild 

    用法如下:document.getElementById('only').childNodes 

    第三部分:修改节点的属性或者文本或者内部含有的HTML

    修改属性:setAttribute('pro','value') 获得属性:getAttribute('pro')

    修改标签内部结构:innerHTML既可以用来获取某部分结构,也可以写入 

    第四部分:创建新元素并添加到某个节点上

     createElement (创建新元素)需要在document对象下创建一个新元素 如var staff=document.createElement('某个HTML标签')//这样就创建完成了

     createTextNode(创建新文本节点)document.createTextNode

     第五部分:添加元素/替换/删除/克隆

    添加有:appendChild 添加到某个元素的某个位置上          用法:某个节点.appendChild(某个需要添加的元素) 这里添加到元素的最后一个

               insertBefore  插入在某个节点之前

         replaceChild  替换某个子元素节点

       removeChild  删除某个节点 

               cloneChild       

  • 相关阅读:
    【bzoj4240】有趣的家庭菜园
    「洛谷 P1801」黑匣子
    「SDOI 2009」Elaxia的路线
    NOIP 2016【蚯蚓】
    NOIP 2014【斗地主】
    尺取法
    POJ 3169 Layout
    51nod【1196】字符串的数量
    51nod1671【货物运输】
    hihocoder1075【开锁魔法】
  • 原文地址:https://www.cnblogs.com/steven-wujianpeng/p/3602027.html
Copyright © 2011-2022 走看看