• JAVASCRIPT高程笔记-------第十章 DOM对象


    10.1.1 node类型 --除IE外 所有浏览器都可以访问到这个类型 ;JS中所有的节点类型都继承自Node类型

      nodeName 与nodeValue  如果是一个元素 那么nodeName中保存的是标签名称,而nodeValue默认为空

    节点关系-每个节点都有一个childNodes属性 ,其中保存着nodeList对象, 注意的是nodeList对象并不是Array实例,而是基于DOM结构动态执行查询的结果;因此在删除或者添加nodeChild时特别注意下标的变化

               parentNode -父节点 该属性指向DOM文档结构的上一层元素,

       firstChild:当前node节点的第一个子节点

       lastChild :当前node节点的最后一个子节点

       hasChildNodes();  当该Node节点包含一个或者多个节点时候,此方法返回true  

    操作节点 --appendChild() 接收一个Node类型的元素  添加到当前节点的childNodes末尾 -如果被添加的节点已经是当前DOM文档的一部分 则将该节点原来的位置移动到childNodes末尾

      insertBefore()  此方法接收两个参数,第一个参数为被插入的节点,第二个为参照节点,执行过后 被插入的节点作为参照节点的同胞节点,如果参照节点为null 则此方法与appendChild一致

      replaceChild()  替换节点  第一个参数为被插入的节点,第二个为被替换的节点,此方法执行后 移除被替换的节点并在其位置上放置被插入的节点

      removeChild() 移除节点   接收一个子节点参数对象,移除后返回这个子节点对象,通过移除的的节点仍然由文档持有,但在DOM结构中没有其位置而已

    注意以上方法都是在由当前节点的父节点对象上执行,否则将会报错

      cloneChild()  复制节点,接收一个boolean值参数,表示是深复制(包含当前节点的所有子节点)还是浅复制(当前节点对象本身)  此方法 返回被复制的节点对象

    document类型

      js通过Document对象来表示文档,在浏览器中document对象是HTMLDocument对象的一个实例,表示这个HTML页面,document对象具有以下特性 nodeType的值为9  nodeType为“#document” 

         文档信息--title属性

    <script>
        var dom = window.document;
        console.log(dom.title);  // 原标题  aaaa
        dom.title="myTest";        //修改文档标题  为myTest
        console.log(dom.title); //myTest    并且将在浏览器上显示
    </script>

     URL,domain,referrer 属性   -网页请求的属性

      URL : 包含页面完整的URL(地址栏显示的URL)

      domain : 包含页面的域名 

      referrer : 保存着链接到当前页面的那个页面的URL ,简单说 就是A页面有个链接,点击链接会跳转到B页面,此时访问B页面的referrer属性 就会返回A页面的URL

      以上属性中只有domain属性是可以设置,由于跨域安全考虑,来自不同子域的页面无法进行JS通讯;如果将页面的domain属性设置为同一个值,那么这些页面就可以互相访问对方包含的js对象

      domain的限制,如果domain设置之后就不能再进行设置  

    查找元素---------document.getElementById()、getElementByTagName()  、getElementByName()

      getElementById() : 根据元素的ID 查找这个元素  完全匹配模式区分大小写,如果ID不存在则返回null  (IE8及以前版本不区分大小写)

      getElementByName(): 根据元素的name属性去匹配元素,返回一个或者多个元素(常用于页面的单选按钮,必须存在相同的Name属性)

      getElementByTagName() :根据标签名称查找元素 ,返回包含零个或者多个元素的nodeList,html文档中返回的是HTMLCollection对象,

      HTMLCollection.item()  : j接收一个下标参数,返回指定位置的HTML元素

      HTMLCollection.nameItem() : j接收一个参数,以集合中的元素的name属性去匹配此参数,返回匹配成功的元素

    文档写入操作   write() 、writeln 、open()、close() 

      write() 和writeln() 都接收一个字符串参数 进行写如操作,区别则是writeln方法会在字符串末尾添加换行符( ),  此方法亦可以动态的包含外部资源 例如写入一段js脚本;此方法在页面加载的时候会直接输出内容至页面,若在页面加载完毕后执行则会重写整个页面

     Element类型 ——用于表现XML或HTML元素 ,提供了对元素标签名称、子节点及特性的访问

      Element的noteType 值为1,nodeName为元素的标签名,nodeValue值为null

           元素的tagname 一般都会等于nodeName 在HTML中 所有的标签名 都采用大写的方式   因此取此属性进行对比时候 注意转换大小写

           html元素  包含   ID : 文档元素唯一标识符    title:有关元素的附加说明信息    lang :元素内容的语言代码,基本不使用     dir : 语言方向 值可以为ltr(left -to-right) 或者 rtl (right-to-left)       className:元素的CSS属性名称 常用

      操作特性 

        getAttribute() :  获取元素的特性,接收一个特性名称返回此特性值   ,若不存在返回null, 此方式也可以获取自定义的特性值      注意的是 class  是获取样式属性 而非 className ,className使用在通过对象属性访问特性时才使用

         setAttribute() :  第一个参数为特性名称,第二个参数为特性值 ,执行后会在浏览器立即展现执行后的效果,如被设置的特性不存在则创建这个特性并且赋值

        removeAttribute() : 接收一个参数为特性名称,移除指定元素的特性  执行后会在浏览器立即展现执行后的效果

      onclick等事件处理脚本  如果以getAttribute() 方式获取,则返回相应代码的字符串,若以元素属性的方式访问则返回一个javascript函数

    attributes属性——element类型是使用attributes属性的唯一一个DOM节点类型,attributes属性包含的是以一个NamedNodeMap,与nodeList相似,也是一个动态的集合       以html标签DIV 为例:此属性包含该DIV 的name与值   ID 与值   class与值   

        NamedNodeMap  包含下列方法

           getNamedItem(name) :返回nodeName属性等于name的节点

           removeNamedItem(name): 移除列表中等于name的节点

           setNamedItem(node) :向列表中添加节点,以节点的nodename属性为索引

           item(pos): 返回位于指定下标的节点

      创建元素    document.createElement(“name”)  创建一个指定标签名的元素  返回这个元素对象  并且可以指定这个元素的一些特性,通过appendChild等方法可以添加至文档树中,一旦将元素添加至文档树上,浏览器会立即展示该元素

     Text类型——文本节点由Text类型表示,包含的纯文本内容,内容文本中可以包含转义后的html字符,但不能包含html代码   text节点具有以下特征

        nodeType值为3,nodeName值为“#text”  ,nodeValue值为节点所包含的文本,parentNode必须是一个Element元素,不支持子节点

        操作方法:  appendData(text) : 将一段文本内容添加至节点末尾 

             deleteData (offset,count) : 从offset位置开始删除指定count个字符

             insertData (offset,text): 从offset位置插入文本内容

             replaceData(offset,count,text) : 用text文本替换 从offset位置开始到offset+count位置的字符

             splitText(offset): 从offset位置将当前文本节点分割成两个文本节点

             subStringData(offset,count): 从offset位置开始截取至offset+count位置的字符

           length: Text类型的字符数量

      创建文本节点  createTextNode()    接收文本类型字符串或者转义后的html字符        

      原则上来说一个Element元素只有一个文本子节点,在特定情况下也可能包含多个 文本子节点

      规范文本子节点  ——dom文档中存在相邻的文本节点会导致混乱,-------在包含一个或者多个文本子节点的元素上调用 normalize() 方法则会将所有的文本节点汇总成一个文本子节点,而这个子节点的值为合并前每个子节点的值进行拼接而成的值

  • 相关阅读:
    一步一步学数据结构之(动态申请二维数组)
    运维自动化
    oracle查看登录到oracle服务器的客户端ip
    权限
    windows下使用SQLPLUS制作BAT执行SQL文件
    rsyslog传输type
    C经典实例
    mysql导出数据库数据及表结构
    解决oracle11g无法导出空表问题
    opennebula onenebula
  • 原文地址:https://www.cnblogs.com/shenwenbo/p/8024698.html
Copyright © 2020-2023  润新知