WebAPI(part4)--操作元素

学习笔记，仅供参考，有错必纠

参考自：pink老师教案

文章目录

Web API
- 操作元素
- - 改变元素内容
  - 常用元素的属性操作
  - 表单元素的属性操作
  - 样式属性操作

Web API

操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等.

改变元素内容

从起始位置到终止位置的内容，但是去除html标签，同时空格和换行也会被去除：

element.innnerText

从起始位置到终止位置的全部内容，保留html标签，保留空格和换行：

element.innerHTML

举个例子

HTML代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title><style>div {width: 200px;height: 100px;background-color: pink;}</style>
</head><body><button>显示当前系统时间</button><div>时间</div><script>// 当我们点击了按钮，  div里面的文字会发生变化// 1. 获取元素 var btn = document.querySelector('button');var div = document.querySelector('div');// 2.注册事件btn.onclick = function() {div.innerHTML = 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];}</script>
</body></html>

页面：

点击按钮显示当前系统时间：

innerText和innerHTML的区别

获取内容时的区别：innerText会去除空格和换行，而innerHTML会保留空格和换行

设置内容时的区别：innerText不会识别html，而innerHTML会识别

常用元素的属性操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素的属性操作

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

type, value, checked, selelcted, disabled

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

举个例子

HTML代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title><style>div {width: 200px;height: 100px;background-color: pink;}</style>
</head><body><button id="yytj">应用统计</button><button id="sljj">数量经济</button><br><input type="text" value="应用统计0班"><script>// 修改元素属性  src// 1. 获取元素var yytj = document.getElementById('yytj');var sljj = document.getElementById('sljj');var myinput = document.querySelector('input');// 2. 注册事件  处理程序yytj.onclick = function() {myinput.value = "应用统计0班";}sljj.onclick = function() {myinput.value = "数量经济1班";}</script>
</body></html>

页面：

点击按钮数量经济：

样式属性操作

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

常用方式：

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

行内样式操作style属性

我们可以通过元素对象.style.样式属性 = 值;设置元素的style属性。

举个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title><style>div {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><button>点我</button><div></div><script>// 1. 获取元素var div = document.querySelector('div');var btn = document.querySelector('button')// 2. 注册事件 处理程序btn.onclick = function() {// div.style里面的属性 采取驼峰命名法 div.style.backgroundColor = 'red';div.style.width = '200px';}</script>
</body></html>

页面：

点击按钮点我：

类名样式操作className属性

我们可以通过元素对象.className = 值;设置元素的style属性。