JS-DOM— —操作元素

四、操作元素

4.1、操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

1、改变元素内容

element. innerText //从起始位置到终止位置的内容但它去除html标签，同时空格和换行也会去掉。

element. innerHTML//起始位置到终止位置的全部内容,包括html标签，同时保留空格和换行。（识别HTML标签）

2、常用元素的属性操作

格式： 元素 . 属性= '修改值 ’

例

//修改元素属性 src

// 获取元素

var 1dh = document . getElementById('1dh');

var zxy = document . getElementById('zxy');

var img = document . querySelector('img');

// 注册事件 处理程序

zxy.onclick = function() {

img.src = 'images/zxy.jpg ;

img.title = '张学友';

}

ldh.onclick = function() {

img.src = 'images/1dh.jpg' ;

img.title = ' 刘德华';

}

3、表单元素的属性操作

利用DOM可以操作如下表单元素的属性:

type. value. checked. selected. disabled（被禁用：btn.disabled = true ;）

表单里面的值文字内容是通过value来修改的

例：

● 获取元素

var btn = document . querySelector( 'button' );

var input = document .querySelector( 'input ');

● 注册事件处理程序

btn.onclick = function() {
// input. innerHTML = '点击了'; 这个是普通盒子比如div标签里面的内容
// 表单里面的值文字内容是通过 value来修改的
input.value = '被点击了';//如果想要某个表单被禁用不能再点击disabled 我们想要这个按钮button禁用
// btn. disabled = true;
this.disabled = true; // this 指向的是事件函数的调用者**btn**

}

4、样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

1. element. style //行内样式操作。

2. element. className //类名样式操作。

注意:

● JS里面的样式采取驼峰命名法比如fontSize、 backgroundColor。

● Js修改style样式操作,产生的是行内样式, 比css权重较高。

● 如果样式修改较多,可以采取操作类名方式更改元素样式。

● class因为是个保留字,因此使用className来操作元素类名属性。

（1）、element . style

语法：

this.style.backgroundColor = 'purple'

注意：

● 适用于 样式比较少 或者功能简单 的情况下使用

（2）、element . className

this.className = ' change ' ;  //让我们当前元素的类名改为了change

注意：

● 适合于样式较多或者功能复杂的情况。

● className 会直接更改元素的类名,会覆盖原先的类名。

如果想保留以前的类名，只需要如下写：

this.className = ‘first	second ‘ ;

4.2、操作元素总结

4.3、排他思想

如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法:

● 所有元素全部清除样式(干掉其他人)。

● 给当前元素设置样式(留下我自己)。

● 注意顺序不能颠倒,首先F掉其他人,再设置自己。

4.4、自定义属性的操作

自定义属性：程序员自己添加的属性

1.获取属性值

● element.属性 获取属性值。

● element . getAttribute(‘属性’);

区别:

● element .属性：获取内置属性值(元素本身自带的属性)。

● element .getAttribute(‘属性’ ); 主要获得自定义的属性 ( 标准)。

2.设置属性值

● element.属性= ‘值’：设置内置属性值。

● element. setAttribute(属性’， ‘值’) ;

区别:

●element.属性：设置内置属性值

●element . setAttribute(‘属性’ ); 主要设置自定义的属性(标准)

3.移除属性

● element. removeAttribute(‘属性’) ;

4.5、H5自定义属性

● 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

● 自定义属性获取是通过getAttribute(‘属性’)获取。

● 但是有些自定义属性很容易引起岐义,不容易判断是元素的内置属性还是自定义属性。

H5新增了自定义属性:

（1）设置自定义属性

H5规定自定义属性data- 开头做为属性名并且赋值。

比如

<div data-index=“1" > </div> 。

或者使用JS设置

element.setAttribute( 'data-index' ,2)

（2）获取自定义属性

1. 兼容性获取element.getAttribute( ‘data-index’ );

2. H5新增element.datasetindex或者element.dataset[ ‘index’] ie 11才开始支持

注意：

如果自定义属性里面有多个 - 链接的单词，我们获取的时候采取驼峰命名法

例如