一、JS操作元素内容及元素属性
1 操作元素内容
简介：
元素内容指开始标签与结束标签之间的内容，单标签没有元素内容，表单标签除外。
1.1操作闭合标签内容
1.闭合标签的内容需要设置或修改，使用闭合标签的innerHTML属性。
语法：
设置：标签.innerHTML = “内容”；
获取：var text = 标签.innerHTML；
var a= document.getElementById("text");
//1.设置内容。
a.innerHTML = "内容"；
//2.innerHTML会覆盖原本的内容，如果想保留之前内容的，既：之前+现在。则
//a.innerHTML = a.innerHTML+"内容"；
a.innerHTML += "内容"；
2.innerHTML与innerText都可以操作标签内容，但innerHTML能识别标签，innerText不能。
1.2操作表单元素内容
操作表单元素用的是表单的value属性。
如：
表单元素.value = “值”; //设置表单元素的内容
var a = 表单元素.value； //获取表单元素的内容
例：
<input type="password" name="password" id="password"><br>
<input type="text" name="text" id="text"><br>
<input type="button" value="填充" id="button">
<script>
var text = document.getElementById("text");
var password = document.getElementById("password");
var btn = document.getElementById("button");
btn.onclick = function () {
var biu = password.value;
text.value = biu;
}
</script>
上面的代码是获取密码框里的内容，并将其赋予密码框下的文本框，如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dshl6NPm-1607560370716)(C:\Users\admin\AppData\Local\Temp\1607558442629.png)]
2 js操作元素属性
语法：
元素.属性名 = “属性值”;
<div id="content" ></div>
<script>
var con = document.getElementById("content");
con.id = "a";
</script>
123456
3 js操作元素样式
语法：
元素.style.样式名 = “样式值”;
如：
<div id="content" ></div>
<script>
var con = document.getElementById("content");
con.style.background ="#00ffff";
</script>
123456
4 cssText
cssText用于设置html的style属性值，如:
<script>
var a = document.getElementById("元素的ID名");
a.style.cssText = "width:100px; height:100px;background:#ccc";
</script>
二、js操作元素属性和获取元素的方法
2.1js操作元素属性
2.1.1.获取双标签中的内容
a.获取元素
var obj = document.getElementById（“id名”）；
修改元素内容
obj.innerHTML = “”;
2.2.2.操作input中的值
var txt = document.getElementById（“id名”）；
txt.value = " ";
2.2获取元素的方法
| 获取方式 | 实例 | 作用 |
|---|---|---|
| 通过id获取元素 | getElementById（“id名”） | 返回的是一个元素对象 |
| 通过className获取 | getElementByClassName（“class名”） | 返回的是一个类数组（多个对象放在一个数组中） |
| 通过标签名来获取元素 | getElementsByTagName（“标签名”） | 返回的是一个类数组 |
| 通过name名来获取元素 | getElementByName（“name属性名”）; | 返回的是name名的属性 |
| 通过选择器获取满足条件的第一个对象 | document.querySelector(“选择器”)； | 返回的是一个元素对象 |
| 通过选择器获取满足条件的所有对象 | document.querySelectorAll(“选择器”)； | 返回的是所有满足的元素对象 |
三、JS操作元素内容的方法
3.1操作普通双标签
| 操作普通双标签 | innerText |
|---|---|
| 作用1 | 获取元素的纯文本内容 |
| 用法 | 元素.innerText |
| 例子 | 看5.1 |
| 作用2 | 设置元素的内容 |
| 用法 | 元素.innerText = “值” |
| 例子 | 看5.1 |
| 注意点 | 内容中有html 标签的话 是不会被解析的 |
| 操作普通双标签 | innerHTML |
|---|---|
| 作用1 | 获取元素的内容 |
| 用法 | 元素.innerHTML |
| 例子 | 看5.2 |
| 作用2 | 设置元素的内容 |
| 用法 | 元素.innerHTML= “值” |
| 例子 | 看5.2 |
| 注意点 | 内容中有html 标签的话 是可以被解析的 |
// 5.1 innerText演示
body {
<h1 id="first">醉后不知天在水</h1>
}
<script>
var first = document.getElementById('first');
console.log(first.innerText);
first.innerText = "西风昨夜过园林";
</script>
12345678910
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<input type="text" name="" id="pwd">
<input type="submit" value="提交" id="sub">
<script>
var box = document.getElementById("box");
var pwd = document.getElementById("pwd");
var sub = document.getElementById("sub");
sub.onclick = function() {
box.innerHTML = box.innerHTML +
"<div><span>教师： </span><span>"+pwd.value+"</span></div>";
}
</script>
</body>
</html>
3.2操作表单
| 操作表单 | value |
|---|---|
| 作用1 | 获取表单的内容 |
| 用法 | 元素.value |
| 作用2 | 设置表单的内容 |
| 用法 | 元素.value = “值” |
3.3操作元素属性的方法
| 操作元素属性 | 属性名 |
|---|---|
| 作用1 | 获取表单的内容 |
| 用法 | 元素.属性名 |
| 作用2 | 设置表单的内容 |
| 用法 | 元素.属性名 = “值” |
3.4操作类名的方法
| 操作元素属性 | 属性名 |
|---|---|
| 作用1 | 获取类名 |
| 用法 | 元素.className |
| 作用2 | 设置表单的内容 |
| 用法 | 元素.className = “指定的类名” |
3.5操作元素样式的方法
| 操作元素样式 | 属性名 |
|---|---|
| 作用1 | 获取类名 |
| 用法 | 元素.style.样式属性名 |
| 作用2 | 设置表单的内容 |
| 用法 | 元素.style.样式属性名 = “属性值” |
| 注意点 | Style中background-color font-size 等这类属性 在操作的时候，都需要写作驼峰命名法 backgroundColor fontSize |
| cssText | 元素.style.cssText = “行内css样式” |
四、js 操作元素样式style、类名class
操作样式
**操作html的style属性中的样式**
添加样式
对象名.style.去掉样式中的-，并-后的首字母为大写
showdiv.style.backgroundColor="red";
当操作的css样式是js中的关键字时，需要在样式名前加css
showdiv.style.cssFloat="left";
一次性添加多个样式
showdiv.style.cssText="height:80px;weight:40px;color:red;background-color:blue";
删除样式
将样式值赋为空,就近原则，若标签中有style属性，css代码域中有属性，则会先将标签中style属性为空，显示css中属性
showdiv.style.backgroundColor="";
修改样式
和添加样式相同
showdiv.style.border="solid 2px orange";
**通过类选择器className**
添加修改样式,首先在标签中声明class="类选择器名"
对象名.className=另一个类选择器名
<div id="div01" class="common"></div>
div01.className="common2";
方式二:
div.classList.add(样式1,样式2,...);
div.classList.toggle(样式名,布尔值); true添加/false移出
删除样式
对象名.className="";
div.clssList.remove(样式1,样式2,...);
代码示例：
<html>
<head>
<title>Document</span></title>
<meta charset="utf-8"/>
<style type="text/css">
#showdiv{
width:200px;
height:200px;
border:solid 1px;
}
.common{
width:200px;
height:200px;
border:solid 1px;
}
.common2{
width:200px;
height:200px;
border:solid 1px;
background-color: orange;
}
</style>
</head>
<body>
<input type="button" value="添加样式" onclick="t1()"/>
<input type="button" value="className方式" onclick="t2()"/>
<hr />
<div id="showdiv">
</div>
<div id="div01" class="common">
</div>
</body>
<script>
function t1()
{
var showdiv=document.getElementById("showdiv");
showdiv.style.backgroundColor="red";
showdiv.style.border="solid 2px orange";
showdiv.style.backgroundColor="";
}
function t2()
{
var div01=document.getElementById("div01");
alert(div01.className);
div01.className="common2";
div01.className="";
}
</script>
</html>