DOM——JavaScript操作页面元素，，，修改元素内容、元素属性、样式属性,移除属性

```
（1）修改元素内容
// innerText，不识别htm1标签，非标准，去除空格和换行
// innerHTML，识别html标签，W3C标准，保留空格和换行的
// 都可读写，可以获取元素里的内容
var text = document.querySelector('span');
var p = document.querySelector('p');
text.innerText = 'none'; //页面加载时修改元素内容 
p.innerHTML = '今天<strong>周二</strong>';//常用

  （2）获取元素属性
// 元素.属性名——获取内置属性值(元素本身自带的属性)
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector(' img ');
console.log(img.src);

// 元素.getAttrybute('属性名')——主要获得自定义的属性( 标准)我们程序员自定义的属性
console.log(img.getAttribute('data-index'));

//h5新增的，dataset是一个集合，里面存放了所有以data开头的自定义属性
console.log(img.dataset.index);
console.log(img.dataset['index']);

//如果自定义属性里面有多个-链接的单词(data-list-name='andy')，我们获取的时候采取驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);

 （3）设置元素属性
// 元素.属性名='值'
zxy.onclick = function() {
    img.src = './image/view1.jpg '; //示范
    img.title = 'zxy';
}
ldh.onclick = function() {
        img.src = './image/view2.jpg'; //示范
        img.title = 'ldh';
    }

//元素.getAttrybute('属性名','值')
img.setAttribute('data-index', 2)
img.setAttribute('class', 'image') //修改img标签的类class

 （4）移除属性
img.removeAttribute('class');

 （5）修改样式属性
var div = document.querySelector('div');
div.onclick = function() {
    this.style.backgroundColor = 'purple'; //元素.style.属性
    this.style.width = '250px';
    this.className = "change"; // 元素.className,,,相当于给元素添加了change类，会覆盖掉原有的类
    this.className = " first change"; // 保留原有的类first，
}