DOM操作元素

  • A+
所属分类:Web前端
摘要

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


DOM操作元素

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

1. 改变元素内容

  1. element.innerText

    从起始位置到终止位置的内容,但它去除HTML标签,同时空格和换行也会去掉(非标准)

  2. element.innerHTML

    起始位置到终止位置的全部内容包括HTML标签,同时保留空格和换行(W3C标准)

注:这两个属性是可读写的,可以获取元素里面的内容。

<div>     <span>我是一个例子</span> </div> <script>     var eg = document.querySelector('div');     console.log(eg.innerText);    // <span>我是一个例子</span>     console.log(eg.innerHTML);    // 我是一个例子 </script> 

2. 修改元素属性

element.src    // 修改元素属性 
<img src="banana.jpg" alt="DOM操作元素"> <script>     var eg1 = document.querySelector('a');     eg1.src = 'apple.jpg';    // 修改图片变为另一张图片 </script> 

3. 样式属性操作

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

// 1.行内样式操作 element.style  // 2.类名样式操作 element.className 

注:

  1. js里面的样式采用驼峰命名法。eg. fontSize、textAlign
  2. js修改style样式操作时,产生的是行内样式,css权重比较高
  3. 如果样式修改较多,可以采取操作类名方式更改元素样式
  4. className会直接更改元素的类名,会覆盖原先的类名

4. 自定义属性的操作

4.1 获取属性值

  • element.属性 获取属性值
  • element.getAttribute('属性');

区别:

  • element.属性 获取内置属性值(元素本身自带的属性)
  • element.getAttribute('属性'); 主要获得由程序员自定义的属性(标准)

4.2 设置属性值

  • element.属性 = '值' 设置内置属性值
  • element.setAttribute('属性', '值');

区别:

  • element.属性 设置内置属性值(元素本身自带的属性)
  • element.setAttribute('属性','值'); 主要设置由程序员自定义的属性(标准)

4.3 移除属性

  • element.removeAttribute('属性');

5. H5自定义属性

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

自定义属性获取是通过getAttribute('属性')获取,但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性,而H5给我们新增了自定义属性。

5.1 设置H5自定义属性

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

// 1.在标签里设置 <div data-index="6">      </div>  // 2.使用js设置 element.setAttribute('data-index', 6); 

5.2 获取H5自定义属性

  • 兼容性获取:element.getAttribute('data-index');
  • H5新增(IE11才开始支持):element.dataset.index 或 element.dataset['index']