DOM详解(三):DOM修改

本文深入解析DOM操作的核心方法,包括innerHTML和textContent的区别,属性的获取与设置,自定义属性的使用,以及样式修改技巧。特别关注跨浏览器兼容性和内存属性访问。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


   修改内容:


      1. .innerHTML: 获取或设置元素开始标签到结束标签之间的html代码片段。
      2. .textContent: 获取或设置元素开始标签到结束标签之间的纯文本内容。
           2件事: 1. 去掉了html标签
                      2. 将转义字符转换为正文
          何时: 如果希望去掉内容中的标签,仅获取文本内容时
          .textContent有兼容性问题: IE8不兼容
                 IE8: .innerText

  修改属性: 


    html标准属性: 
       核心DOM: 万能
           1. 获取属性: 
               ①. 获得属性节点对象: (了解)
                var attrNode=elem.attributes[i/属性名];
                                        elem.getAttributeNode("属性名");
                attrNode.value
               ② 直接获得属性值: 
                var value=elem.getAttribute("属性名");
           2. 设置属性: 
                elem.setAttribute("属性名",新值);
           3. 判断是否包含指定属性: 
                var bool=elem.hasAttribute("属性名")
           4. 移除属性: 
                elem.removeAttribute("属性名");
            
       HTML DOM: 仅对部分的简化
            elem.属性名
          强调: html中的class属性和ES中的class属性冲突
                 html中的class要改名为className

     特例: disabled    selected   checked
        不能用核心DOM操作!只能用html DOM打点操作
        attribute  vs  property
        attribute只出现在开始标签中的属性
        property保存在内存中的对象中的属性

        核心DOM只能操作出现在页面上的attribute属性
           无法操作未出现在页面上的内存中的property属性
        HTML DOM可访问内存中的property属性

   自定义属性:  2种: 
     1. 只能用核心DOM访问,不能用html访问
     2. HTML5: ——兼容问题
        所有自定义属性: 属性名必须: data-属性名
        访问时: elem.dataset.属性名
   何时: 1. 在客户端网页中临时缓存部分业务数据
            2. 代替id和class作为查找元素的条件

修改样式: 


   内联: elem.style.css属性名
     强调: 所有css属性都要去横线变驼峰
        background-color -> backgroundColor
        list-style-type -> listStyleType

   问题1: 只能获得/设置内联样式
           无法获取最终应用到元素上的完整样式
   解决: 
      如果设置一个元素的样式: elem.style.css属性名
          因为: 优先级最高!不影响其他元素
      如果获取一个元素的样式: 不用style
          getComputedStyle(elem).css属性名
   问题2: elem.style.css属性名一句话只能设置一个样式
             如果需要同时设置一个元素的多个css属性,代码繁琐
   解决: 今后只要操作一个元素的样式,都用class属性批量操作
     特例: 精确控制动画效果时,需要操作单个css属性

   内部/外部样式表: 

补: .innerHTML只能获得封闭标签的内容
     表单元素的值只能用.value

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值