文章目录

操作元素

前言

// 从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉
element.innerText
// 从起始位置到终止位置的内容,包括html标签，同时空格和换行会保留
element.innerHtml

区别

  1. innerText 不识别html标签 非标准 去除空格和换行
  2. innerHTML 识别html标签 W3C标准 保留空格和换行的

设置属性的值

元素对象.属性名 = 值

<body>
    <button id="wza">为之奥</button>
    <button id="xxy">下新与</button> <br>
    <img src="images/wza.jpg" alt="" title="为之奥">
    <script>
        var ldh = document.getElementById('wza');
        var img = document.querySelector('img');
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '张学友思密达';
        }
    </script>
</body>

表单元素的属性操作

利用DOM可以操作如下表单元素的属性：
type、value、checked、selected、disabled

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

样式属性操作

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

常用方式：
1.element.style 行内样式操作
2.element.className 类名样式操作

注意:JS 修改style 样式操作，产生的是行内样式，CSS权重比较高

方式1：通过操作style属性

元素对象的style属性也是一个对象！

元素对象.style.样式属性 = 值;

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

方式2：通过操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className。