zoukankan      html  css  js  c++  java
  • Dom-修改

    一、内容的修改

           1.获取或者修改原始html的内容片段

               elem.innerHTML   这是获取内容 

               elem.innerHTML="123456";这是修改内容为123456

               elem.innerHTML后面带值就是修改,不带值就是获取

            2.获取或者修改纯文本内容:

               elem.textContent  可以翻译特殊符号为正文,去掉内嵌的子标签,只保留文字

            3.表单元素的值

                elem.value

    二、属性的修改

          1.html标准属性的修改

               1)核心DOM API

                   获取属性值:var value=elem.getAttribute("属性名");

                   修改属性值:elem=removeAttribute("属性名","新值");

                   移除属性值:elem.removeAttribute("属性名");

                   判断是否包含属性:var bool=elem.hasAttribute("属性名");

               2)HTML DOM API(对常用核心DOM API的简化)

                    HTML DOM将所有的HTML标准属性定义在内存中的元素对象上

                    使用:elem.属性名

                    特例:class是ES的标准关键字

                               DOM中不允许使用class作为属性名

                               DOM中的className属性等于HTML中的class 

          2.状态属性的修改

              状态属性有:enable  disable  selected  checked

              值都是bool类型,不是字符串类型,不能用核心DOM API修改

              只能用HTML DOM中的.来访问 

          3.自定义扩展属性

               自定义属性为自己定义的属性,不是系统中原有的属性

               自定义扩展属性可以代替id,class选择器,HTML DOM无法访问自定义属性

               自定义扩展属性的定义方法:<任何标签 自定义属性名=“值”>

                HTML5标准中的定义:<任何标签 自定义属性名=“值”>

                自定义属性的修改和获取

                      1.核心DOM API对自定义属性的操作

                           .getAttribute()//获取属性

                           .setAttribute()//获取属性

                           .removeAttribute()//移除属性

                            .hasAttribute()//判断属性的存在

                         注意:HTML DOM API不能操作自定义属性,由于自定义属性不是一开始就存在于HTML标准,则没有包含在元素树中,不能直接访问

                       2.HTML5标准中对自定义属性的操作         

                               elem.dataset//可自动获取所有的data-开头的属性

                                .自定义属性名称//使用dataset访问自定义属性时,不用data-前缀

    三、样式的修改 

           1.内联样式的修改

              elem.style.css属性名=“值“  <=> <elem style="css属性名:值">

              注意:1.css属性名中如果带-,需要去掉横线变驼峰

                              z-index=>zIndex

                              list-style=>listStyle

                              background-color=>backgroundColor

                           2.如果是带px、em等单位的属性值,

                                修改时:必须手动拼接到结尾  .style.width=12+"px"

                                获取时:不许去掉结尾的px、em,才能做计算

                             elem.style仅代表内联样式

                             修改时:如果elem.style 优先级最高

                              获取时:只能获取内联样式,无法获取外部样式中的样式

                              获取样式:不能用style

                                    应该获取计算后的样式:最终应用到元素上的所有样式的集合

                                    获取样式的步骤:

                                           1.先获取计算后的样式的集合对象:

                                              var style=getComputedStyle(elem)

                                            2.获取一个css属性的值

                                               style.css属性

                                    注意:应为计算后的样式属性来源不确定,所以都是只读的

                             问题:elem.style修改样式,一句话只能修改一个属性

                             解决:今后只要修改大量的css属性,首选修改class的修改方式

           2.内外部样式表的修改

              var sheet=document.styleSheets[i];

               var rule=sheet.cssRules[i]

                rule.style.样式属性=值

           3.最好的修改样式的方法

              修改class属性,批量修改样式。

      

  • 相关阅读:
    解决跨域问题 cors~ JSONP~
    session,cookie,sessionStorage,localStorage的区别~~~前端面试
    数据库索引的理解
    script的按需加载
    es6 笔记
    JS 工具函数
    JS Error
    数组方法重写:forEach, map, filter, every, some, reduce
    JS: GO 和 AO
    立即执行函数
  • 原文地址:https://www.cnblogs.com/houcong/p/11460158.html
Copyright © 2011-2022 走看看