zoukankan      html  css  js  c++  java
  • DOM操作元素

    DOM操作元素

    js的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

    1. 改变元素内容

    1. element.innerText

      从起始位置到终止位置的内容,但它去除HTML标签,同时空格和换行也会去掉(非标准)

    2. element.innerHTML

      起始位置到终止位置的全部内容包括HTML标签,同时保留空格和换行(W3C标准)

    注:这两个属性是可读写的,可以获取元素里面的内容。

    <div>
        <span>我是一个例子</span>
    </div>
    <script>
        var eg = document.querySelector('div');
        console.log(eg.innerText);    // <span>我是一个例子</span>
        console.log(eg.innerHTML);    // 我是一个例子
    </script>
    

    2. 修改元素属性

    element.src    // 修改元素属性
    
    <img src="banana.jpg">
    <script>
        var eg1 = document.querySelector('a');
        eg1.src = 'apple.jpg';    // 修改图片变为另一张图片
    </script>
    

    3. 样式属性操作

    可以通过js修改元素的大小、颜色、位置等样式。

    // 1.行内样式操作
    element.style
    
    // 2.类名样式操作
    element.className
    

    注:

    1. js里面的样式采用驼峰命名法。eg. fontSize、textAlign
    2. js修改style样式操作时,产生的是行内样式,css权重比较高
    3. 如果样式修改较多,可以采取操作类名方式更改元素样式
    4. className会直接更改元素的类名,会覆盖原先的类名

    4. 自定义属性的操作

    4.1 获取属性值

    • element.属性 获取属性值
    • element.getAttribute('属性');

    区别:

    • element.属性 获取内置属性值(元素本身自带的属性)
    • element.getAttribute('属性'); 主要获得由程序员自定义的属性(标准)

    4.2 设置属性值

    • element.属性 = '值' 设置内置属性值
    • element.setAttribute('属性', '值');

    区别:

    • element.属性 设置内置属性值(元素本身自带的属性)
    • element.setAttribute('属性','值'); 主要设置由程序员自定义的属性(标准)

    4.3 移除属性

    • element.removeAttribute('属性');

    5. H5自定义属性

    自定义属性目的:为了保存并使用数据,有些数据可以保存到网页中而不用存储到数据库中。

    自定义属性获取是通过getAttribute('属性')获取,但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性,而H5给我们新增了自定义属性。

    5.1 设置H5自定义属性

    H5规定自定义属性用data-开头作为属性名并赋值。

    // 1.在标签里设置
    <div data-index="6">
        
    </div>
    
    // 2.使用js设置
    element.setAttribute('data-index', 6);
    

    5.2 获取H5自定义属性

    • 兼容性获取:element.getAttribute('data-index');
    • H5新增(IE11才开始支持):element.dataset.index 或 element.dataset['index']
  • 相关阅读:
    [USACO07FEB]银牛派对Silver Cow Party
    道路重建
    javascript基础
    css清除浮动
    css水平居中
    块元素与行内(内嵌)元素的区别
    hook
    回调函数
    Web服务API
    Enrolment注册插件
  • 原文地址:https://www.cnblogs.com/chiYiN-zZZ/p/14024564.html
Copyright © 2011-2022 走看看