文档对象模型(DOM)

1.文档对象模型,浏览器提供给js操作html文档的api

节点Node  --构成HTML文档最基本的单元
 分类:
        文档节点:整个HTML文档
        元素节点:HTML文档中的HTML标签
        属性节点:元素的属性
        文本节点:HTML标签中的文本内容

文档节点元素节点属性节点文本节点
nodeName#document标签名属性名#text
nodeType9123
nodeValuenullnull属性值文本

2.Node.prototype(继承object根构造函数)

 1)属性
    获取父节点的子节点
     1.element.childNodes    属性            
        -返回元素的一个子节点的数组(包括空白)
            在ie8及以下的浏览器中,不识别空白
        element.children 属性可以获取到当前元素的所有子元素(不包括空白文本)
        element.childElementCount    子元素的数量,返回值和children.length值相等

     2.element.firstChild    属性            
        -返回元素的第一个子节点
        element.firstElementChild    获取当前元素的第一个子元素(不包括空白)
                                    不支持在ie8及以下的浏览器
     3.element.lastChild     属性          
        -返回的最后一个子元素
        element.lastElementChild    最后一个孩子元素节点,不支持在ie8及以下的浏览器


    获取父节点和兄弟节点,通过具体的节点调用
    1.parentNode  属性
        表示当前节点的父节点

    2.previousSibling   属性
        表示当前节点的前一个兄弟节点(也会获取到空白)
        previousElementSibling
            表示当前节点的前一个兄弟元素,ie8不支持

    3.nextSibling     属性
        表示当前节点的后一个兄弟节点
        nextElementSibling    
            下一个兄弟元素节点,ie8不支持


 2)方法

    增删改(都要由父节点去调用)
        1.appendChild()
            -向一个父节点中添加一个新的子节点
                语法:  
                    父节点.appendChild(子节点)
        2.insertBefore()
            -在指定的子节点前前面插入新的子节点
                语法:
                    父节点.insertBefore(新节点,旧节点)
        3.replaceChild()
            -可以使用指定的子节点替换已有的子节点
                语法:
                    父节点.replaceChild(新节点,旧节点)
        4.removeChild()
            -可以删除一个子节点
                语法:
                    父节点.removeChild(子节点)
    
    其他方法
        1.cloneNode()
            可以复制一个调用他的节点,默认为浅复制
                语法:调用它的节点.cloneNode(参数)
                可以接收一个参数,参数为true时,为深复制,即复制节点以及整个子节点数
                                参数为false时,为浅复制,仅复制该节点,不包括其他的一切
        
        2.normalize()
            处理文档树中的文本节点,由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,
            或者接连出现两个文本节点,当在某个节点上调用了该方法,会删除空白节点,
            会找到相邻的两个文本节点,并将他们合并为一个文本节点。

3.Document.prototype

都可以继承Node中的所有属性和方法

    1)属性

    documentElement    始终指向HTML页面中的<html>元素。
    
    body        直接指向<body>元素
    
    doctype        访问<!DOCTYPE>, 浏览器支持不一致,很少使用
    
    title        获取文档的标题
    
    URL            取得完整的URL
    
    domain        取得域名,并且可以进行设置,在跨域访问中经常会用到。服务器测
    
    referrer    取得链接到当前页面的那个页面的URL,即来源页面的URL。
    
    images        获取所有的img对象,返回HTMLCollection类数组对象
    
    forms        获取所有的form对象,返回HTMLCollection类数组对象
    
    links           获取文档中所有带href属性的<a>元素

    2)方法
        获取文档元素节点,通过document对象调用

          document.getElementById()    
                -通过id属性获取一个元素节点对象

          document.getElementsByTagName()
                -通过标签名获取一组元素节点对象
                这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
                即使查询到的元素只有一个,也会封装到数组中

          document.getElementsByName()
                -通过name属性(表单项)获取一组元素节点对象
                innerHTML用于获取元素内部的HTML代码,对于input这种自结束标签,这个属性没有意义
                如果需要读取元素节点属性,直接使用  元素.属性名
                    class属性不能采用这种方式
                                 读取class属性时需要使用 元素.className

             对象.innerHTML 通过这个属性可以获取到元素内的html代码
             对象.innerText 该属性可以获取到元素内部的文本内容
                  它和innerHTML类似,但它会将html标签去除
             对象.textContent          元素内部的文本,不去除空格和回车


          document.getElementsByClassName()
                -可以根据class属性值获取一组元素节点对象,
                 但是该方法不支持ie8及以下浏览器

          document.querySelector()
            -需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象
            -虽然ie8中没有getElementsByTagName();但是可以使用querySelector()
            -使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么他只会返回第一个
          document.querySelectorAll()
            -该方法会返回所有符合条件的元素,将其封装到数组中
            -即使符合条件的元素只有一个,也会返回数组

        创建元素节点
          document.createElement()
            -用于创建一个元素节点对象
          document.createTextNode()
            -用来创建一个文本节点对象

4.Element.prototype

element 获取元素节点的子节点,通过具体的元素节点调用

    1)属性

        id            元素在文档中的唯一标识符
        
        title            有关元素的附加说明信息
        
        className        与元素class特性对应
        
        src            img元素具有的属性
        
        alt            img元素具有的属性
        
        lang        元素内容的语言代码,很少使用!
        
        dir            语言方向,ltr,rtl 左到右,右到左、

    2)方法
        1.element.getElementsByTagName()  方法
            -返回指定标签名的所有子元素集合。

        2.element.setAttribute('','')
            -创建一个自定义属性
            两个参数,第一个参数为要设置的特性名,第二个参数为对应的值。
            如果该值存在,替换
        3.element.getAttribute('')
            -获取自定义属性
            参数为实际元素的属性名
            通过getAttribute()访问对象的style属性,返回的是CSS文本(字符串)
                                访问onclick属性,返回的是一个函数
            通过属性访问style返回的是相应代码字符串,onclick返回的是一个函数
        4.element.removeAttribute('')
            -移除指定的特性
            参数为实际元素的属性名
    
        document.createElement()  
            参数为要创建元素的标签名。该标签名在HTML中不区分大小写,但是在XML中区分大小写

    特殊属性
        style    通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问返回一个对象,由于style属性是用于以编程方式访问元素样式的,因此并没有直接映射到style特性
        onclick    类似的事件处理程序,通过getAttribute()访问时,返回相应代码字符串;访问onclick属性时,返回一个javascript函数

    元素内容
        innerHTML              返回元素内容,包括html标签
        innerText            元素内部的文本,去除回车和换行
        textContent          元素内部的文本,不去除空格和回车

    作为文档树的文档
    将文档看做是Element对象树,忽略文档Text,Comment节点。Element中的属性
        children    类似于childNodes,返回NodeList对象,但是该对象中仅包含Element对象
        firstElementChild    第一个孩子元素节点    
        lastElementChild    最后一个孩子元素节点
        nextElementSibling    下一个兄弟元素节点
        previousElementSibling    上一个兄弟元素节点
        childElementCount    子元素的数量,返回值和children.length值相等

5.text 文本类型

    1)属性
        length                  //文本长度

    2)方法
    appendData(text)                    //追加文本
    deleteData(beginIndex,count)        //删除文本
    insertData(beginIndex,text)            //插入文本
    replaceData(beginIndex,count,text)    //替换文本
    splitText(beginIndex)                  //从beginIndex位置将当前文本节点分成两个文本节点
    document.createTextNode(text)    /   /创建文本节点,参数为要插入节点中的文本
    substringData(beginIndex,count)     //从beginIndex开始提取count个子字符串

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值