zoukankan      html  css  js  c++  java
  • 浅谈DOM的概念和作用

    首先呢,DOM在JS中就是 Document Object Model的缩写,简称就是文档对象类型,它给文档提供了一种结构化的表示方式,可以改变文档的内容和呈现方式。不过我们要关心的是DOM如何把网页和脚本以及其他的编程语言联系起来。DOM是以家族的形式描述HTML。父子节点,兄弟节点。

    DOM中的选择器:
    一、元素节点选择器:(id,class,name,tagname,高级,关系)
     
        1.getElementById(id)        //获取指定元素的ID元素,返回的是单个对象
        2.getElementsByTagName()    //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组
        3.getElementsByName()       //通过name值获取元素,返回值是数组,通常用来获取有name的input的值
        4.getElementsByClassName()  //通过class名获取元素,返回值是数组n
    注意:1.不是所有标签都有name值;2.在低版本的浏览器中,getElementsByName和getElementsByClassName有兼容性
    高级选择器:
    所以为了解决兼容性的问题,在ES5中就新增了选择器:(强大到超乎想象,支持IE8+。ECMAScript借鉴了jQuery选择器的)
        document.querySelectorAll();           //返回一个数组,哪怕只有一个元素
        document.querySelector();              //返回单个元素

    关系选择器:(兼容性不好)

     根据父级,选择子级:   oDiv.children;        //返回一个数组

     根据子级,选择父级: oSpan.parentNode;     //返回一个元素


    // var omsg = document.querySelector(".msg");      //第一个子
    // console.log(omsg.firstElementChild)

    // var omsg = document.querySelector(".msg");    // 最后一个子
    // console.log(omsg.lastElementChild)

    // var omsg = document.querySelector(".msg");     // 上一个兄弟
    // console.log(omsg.previousElementSibling)

    // var omsg = document.querySelector(".msg");      // 下一个兄弟
    // console.log(omsg.nextElementSibling);

    二、其他节点选择器:(关系)

    这里是在HTML中显示的各种其他节点:

    <body>
    <span>qwe</span>
    <div class="box">
    <span>1</span>
    <p>2</p>
    hello
    <!-- 这是注释 -->
    <em>3</em>
    </div><span>zxc</span>
    </body>

    var obox = document.querySelector(".box")          // 父选子   //NodeList(9)注意在这里换行和空格都属于节点,所以显示是显示出box中的所有节点以类数组的形式在控制台中输出;
    console.log(obox.childNodes)

    var obox = document.querySelector(".box")       // 上一个兄弟  //#text
    console.log(obox.previousSibling)

    var obox = document.querySelector(".box")       // 下一个兄弟   // <span>zxc<span>
    console.log(obox.nextSibling)

    // var obox = document.querySelector(".box")    // 第一个子   //#text
    // console.log(obox.firstChild)

    // var obox = document.querySelector(".box")    // 最后一个子   //#text
    // console.log(obox.lastChild)

    三、节点

    根据DOM规定,HTML文档中的每个成分都是一个节点。
        DOM是这样规定的:
            整个文档是一个文档节点
            每个HTML标签是一个元素节点
            包含在HTML元素中的文本是文本节点
            每一个HTML属性是一个属性节点
            注释属于注释节点

     相当于HTML文档中的所有内容都是节点,元素是节点的别称,节点包含元素,当然节点还有好多细化的种类

     如何获取DOM节点:
              对象.parentNode    //获得父元素节点
     
              对象.children      //获得子元素节点的集合,不包含空白节点
                                //但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
              对象.childNodes    //获得所有子节点的集合,包括空白节点
                                //IE7/8不包含空文本节点,但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
        
     如何获取属性节点:
              对象.attributes   //获得所有属性节点,返回一个数组
     
    四、DOM属性的基本操作(增/删/改/查)
    改变元素的内容(innerHTML),属性(value),样式(width,height,background)
        也就是对DOM进行增删改查。什么是元素的属性?class就是元素的属性,写在元素内的所有东西都是元素的属性,比如link的href,img的src等。
    可以分为两种,一种叫内置属性,一种叫非内置属性。
    内置属性可以直接通过点"."进行操作
    tagName               //返回值是当前元素的标签名
    innerHTML/innerText  //返回值是当前元素的内容
    id                    //返回值是当前元素的ID
    title                 //获取title的标签值,这个title是从document中获取的
    className             //返回值是当前元素的class
    href                  //返回值是当前的href的值
    非内置属性需要通过一些节点的方法进行操作,注意:节点的方法,前缀一定是节点
    getAttribute()        //获取 元素的属性
    setAttribute()        //设置/修改 元素的属性,低版本的IE不兼容;接收两个参数,属性名和属性值
    removeAttribute()     //删除 元素的属性,低版本的IE不兼容
    在这里要注意getAttribute()和 对象.attributes 的区分,前者是对元素中属性的获取操作,后者是用来获得对象中所有属性节点的操作,前者是获得所有属性节点,返回一个数组。
     
    五、DOM元素的基本操作(增/删/改/查)
    查询:选择器;
    创建:createElement()  配合  appendChild()    将创建好的元素,插入到某个标签内的最后
     删除:removeChild()  配合  parentNode
               元素.remove()    直接删除当前元素
               document.body.removeChild(div);
    修改: outerHTML
        oh1.outerHTML = "<h2>" + oh1.innerHTML +"</h2>"
  • 相关阅读:
    为什么GNU grep如此之快?
    在百度nlp实习一个月时间里用到的shell操作
    InfoPi简介、试用链接、资料索引
    自定义worker的方法,及一例
    2017.1.9版给信息源新增:max_len、max_db字段
    手把手写一个html_json信息源
    定义信息源的一些示例(xml文件)
    启用https协议的方法
    安装第三方Python模块,增加InfoPi的健壮性
    更新日志(建议升级到2017.1.18a) && 更新程序的方法
  • 原文地址:https://www.cnblogs.com/zhuangch/p/11416180.html
Copyright © 2011-2022 走看看