.操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容属性等
5.1 改变元素内容
element.innerText//从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会换掉
<body><button>显示当前系统时间</button><div>某个时间</div><p>1234</p><script>// 点击按钮，div里面的文字发生变化// 1. 获取元素var btn = document.querySelector('button');var div = document.querySelector('div');//2.注册事件btn.onclick= function() {div.innerText = getDate();}function getDate() {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = date. getDay();return year + '年' + month + '月' + dates + '日' + arr[day];}// 元素不添加事件 页面刷新时直接显示var p = document.querySelector('p');p.innerText = getDate();</script></body>
element.innerHTML//起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
<body><div></div><script>// innerText和 innerHTML的区别// 1. innerTextvar div = document.querySelector('div');div.innerText= '<strong>今天是：</strong>';//不会加粗 显示标签// 2. innerHTMLdiv.innerHTML= '<strong>今天是：</strong>';//会加粗//两个标签都是可读写的</script></body>
5.2 常用元素的属性操作
innerText、innerHTML 改变元素内容
src、 href
id、alt、title
例：img.src='...';
5.3 表单元素的属性操作
利用DOM可以操作如下表单元素的属性：
type、value、checked、selected、disabled
//1. 用input.innnerHTML不能改变表单里面的值input.value= ''; // 文字内容通过value修改//2. 禁用按钮btn.disabled = true;
5.4 样式属性操作
可以通过JS修改元素的大小，颜色，位置等样式
element.style 行内样式操作element.className 类名样式操作
// 1.element.style 行内样式操作 修改div样式里的属性 属性采取驼峰命名法div.style.backgroundColor = 'purple';// 2. element.className 类名样式操作// 先在CSS里声明好一个类 写入理想的样式// 通过添加类名，改变样式div.className = '添加的类名' //不加点// 因为是赋值操作， 恢复覆盖掉原来的类名//3. 如果想保留原来的类名，则div.className = '类名1 类名2';
5.5 自定义属性的操作
1. 获取属性值
element.属性 ：获取属性值。element.getAttribute(‘属性’)；
区别
element.属性 获取内置属性值(元素本身自带的属性)，例如id、classelement.getAttribute(‘属性’)；主要获取的是自定义属性(标准) 程序员自定义属性
2. 设置属性值
element.属性 = ‘值’ 设置内置属性值。element.setAttribute(‘属性’, ‘值’)；主要针对于自定义属性
3. 移除属性
element.removeAttribute(‘属性’)；
<body><div id ="demo" index = "1" class = "nav" ></div><script>var div = document.querySelector('div');//1. 获取元素的属性值//(1) element.属性console.log(div.id);//demo//(2) element.getAttribute('属性')console.log(div.getAttribute('id'));//democonsole.log(div.getAttribute('index'));//1// 2. 设置元素属性值//(1)element.属性 = '值' div.id = 'test';//如果是改类名，则：div.className = 'navs';//(2)element.setAttribute('属性', '值')；div.setAttribute('index', '2');// 改类名div.setAttribute('class', 'footer')//class 比较特殊// 3. 移除属性 removeAttribute(属性)div.removeAttribute('index');</script> </body>
5.6 H5自定义属性
自定义属性的目的：
是为了保存并使用数据。有些数据可以保存到页面中而不保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性和容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
<div getTime = "20"></div><script>var div = document.querySelector('div');console.log(div.getTime);// undefinedconsole.log(div.getAttribute('getTime'));//20</script>
为解决上述问题
H5新增了自定义属性：
1.设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值。
比如<div data-index=“1”></div>
或者使用JS设置
element.setAttribute(‘data-index’, 2);
2. 获取H5自定义属性
兼容性获取 element.getAttrbute(‘data-index’);
H5新增element.dataset.index 或者element.dataset[‘index’] ie11才开始支持
注意：加入自定义属性名过长 如：data-list-name=‘andy’
获取写法：element.dataset.listName;驼峰命名法
