操作元素
前言
// 从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉
element.innerText
// 从起始位置到终止位置的内容,包括html标签，同时空格和换行会保留
element.innerHtml
区别
- innerText 不识别html标签 非标准 去除空格和换行
- innerHTML 识别html标签 W3C标准 保留空格和换行的
设置属性的值
元素对象.属性名 = 值
<body>
<button id="wza">为之奥</button>
<button id="xxy">下新与</button> <br>
<img src="images/wza.jpg" alt="" title="为之奥">
<script>
var ldh = document.getElementById('wza');
var img = document.querySelector('img');
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
</script>
</body>
表单元素的属性操作
利用DOM可以操作如下表单元素的属性：
type、value、checked、selected、disabled
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。
样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
常用方式：
1.element.style 行内样式操作
2.element.className 类名样式操作
注意:JS 修改style 样式操作，产生的是行内样式，CSS权重比较高
方式1：通过操作style属性
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值;
<body>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
// 2. 注册事件 处理程序
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
方式2：通过操作className属性
元素对象.className = 值;
因为class是关键字，所有使用className。