.操作元素
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. innerText
var div = document.querySelector('div');
div.innerText= '<strong>今天是：2020</strong>';//不会加粗 显示标签
// 2. innerHTML
div.innerHTML= '<strong>今天是：2020</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、class
- element.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'));//demo
console.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);// undefined
console.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;驼峰命名法
