改变元素内容
element.innerText
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.innerText = '<strong>今天是:</strong>2021';
</script>
</body>
输出为:<strong>今天是:</strong>2021
不识别HTML标签,从起始位置到终止位置的内容,但他去除html标签,空格和换行也会去掉
element.innerHTML
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.innerHTML = '<strong>今天是:</strong>2021';
</script>
</body>
输出为: 今天是:2021
识别HTML标签,从起始位置到终止位置的全部内容,包括HTML标签,保留空格和换行
常用元素的属性操作
- innerText,innerHTML
- src,href
- id,alt,title
表单元素的属性操作
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.queruSelector('button');
var input = document.queruSelector('input');
btn.onclick = function() {
/*通过value来改变表单中的文字*/
input.value = '被点击了';
/*禁用按钮*/
this.disabled = true;
}
</script>
</body>
通过element.value = '';来修改表单元素中的文字,将this指向的btn按钮改变为不可点击的
利用DOM可以操作一下表单元素的属性:
type,value,checked,selected,disabled
样式属性操作
通过js修改元素大小,颜色,位置等样式
- elemen.style 行内样式操作
- elemen.className 类名样式操作
注意:
- js的样式采取驼峰命名法,例:fontSize, backgroundColor
- js修改style样式操作产生的是行内样式,css权重更高
- 如果样式修改较多,可以采取操作类名方式更改元素样式
- class是个保留字,因此使用className操作元素类名属性
总结
获取自定义属性值
获取属性值
- element.属性
- element.getAttribute('属性');
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
console.log(div.id);
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>
</body>
区别
- element.元素.属性(div.属性); 获取内置属性值(元素本身自带属性)
- element.getAttribute('属性'); 主要获得自定义的属性
设置属性值
- element.属性 = ' '; 设置内置属性值
- element.setAttribute('属性'); 主要针对自定义属性值
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
console.log(div.id);
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
div.id = 'test';
div.className = 'navs';
div.getAttribute('index',2)/*将index属性值更改为2*/
div.getAttribute('class','footer');/*将class属性值更改为footer*/
</script>
</body>
移除属性值
- div.removeAttribute('index');
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
console.log(div.id);
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
div.id = 'test';
div.className = 'navs';
div.getAttribute('index',2)/*将index属性值更改为2*/
div.getAttribute('class','footer');/*将class属性值更改为footer*/
div.removeAttribute('index');/*移除属性index*/
</script>
</body>
H5自定义属性
自定义属性目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute('属性')获取
有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性
设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
例如<div data-index = "1"></div>
或者使用js设置
element.setAttribute('data-index',2);
获取H5自定义属性
兼容性获取 element/getAttribute('data-index');
element.dataset.index 或者 element.dataset['index'] (ie11才支持)
dataset 是一个集合里面存放了所有以data开头的自定义属性
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
console.log(div.div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
输出结果为:
DOMStringMap{index: "2", time: "20"}
2
2
andy
andy