2：操作元素

一 操作元素内容

element.innerText // 不识别HTML标签 去除空格和换行
element.innerHtml // 识别HTML标签 保留空格和换行
//这两个属性都是可读写的

indexHtml 和  innerText 的区别

添加纯文本 就用 innerText
添加的内容里有 HTML标签 空格 换行 就用innerHtml

二 操作普通元素属性

1）语法

element.属性名; //获取
element.属性名 = value; //设置

常见的属性：src alt href title id class等

代码示例

<button id="btn1">刘德华</button>
<button id="btn2">杨幂</button>
<img src="image/ldh.jpg" alt="">
<script>
    //1 获取元素
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var img = document.getElementsByTagName('img');
    //给第一个按钮注册事件
    btn2.onclick = function () {
        img[0].src = 'image/ym.jpg';
        img[0].title = '杨幂';
    }
    //给第一个按住注册点击事件
    btn1.onclick = function () {
        img[0].src = 'image/ldh.jpg';//对src地址重新赋值
        img[0].title = '刘德华';
    }
</script>

三 操作表单属性

1）常见的表单属性

type  value checked  selected  disabled
类型    值     选中   下拉框选中   按钮禁用

普通元素的内容用 innerHtml 属性
表单元素的内容用 value 属性

四 操作样式属性

0）两种方法

// 1 element.style.fontSize = '16px;'; //行内样式法 [ 适合样式少 ]

// 2 element.className = '类名'; //修改类名法 [ 适合样式多且复杂 ]

1）行内样式法

1 样式名用小驼峰命名法  fontSize backgroundColor

2 产生的是行内样式 CSS的权重比较高

2）修改类名法

//1 如果修改的样式比较多 我们用修改类名法
//2 class是系统保留字 所有用className 来操作类名属性
//3 它会直接更改元素的类名，会覆盖原先的类名
//4 如果不想覆盖 而是追加样式 element.className = '原类名,追加的类名'

五 操作自定义属性

1）方法1

// . 获取 getAttritute('属性名')

// . 设置 setAttribute('属性名','属性值');

// . 删除 removeAttribute('属性名')

2）方法2 [ H5新增 ]

element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

3）自定义属性的目的

//1 为了保存并使用数据 有些数据可以保存到页面中 不用保存到数据库中

//2 H5 规定所有的自定义属性都以 data- 开头