HTML之JavaScript DOM操作元素（1）
3.对元素进行操作
1.操作元素的属性 元素名.属性名 = ""
2.操作元素的样式 元素.style.样式名 = "" 样式名 "-" 要进行驼峰转换
3.操作元素的文本 元素名.innerText 只识别文本
元素名.innerHTML 识别文本的同时可以识别HTML代码
4.增删元素 (见下一篇文章)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小标题</title>
<script>
/*
步骤：
1.获得document DOM树
window.document(是window的属性)
2.从document中获取要操作的元素
1.直接获取
var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
var bbb = document.getElementsByTagName("input")
var ccc = document.getElementsByName("aaa")
var ddd = document.getElementsByClassName("a")
2.间接获取
var cs = div01.children // 获取全部子元素
var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
var parentE = mmm.parentElement // 通过子元素获取父元素
var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素
3.对元素进行操作
1.操作元素的属性 元素名.属性名 = ""
2.操作元素的样式 元素.style.样式名 = "" 样式名 "-" 要进行驼峰转换
3.操作元素的文本 元素名.innerText 只识别文本
元素名.innerHTML 识别文本的同时可以识别HTML代码
4.增删元素
*/
// 操作属性
function op_attribute() {
var v1 = document.getElementById("text1");
// 语法：元素.属性名 = ""
// 获得属性值
console.log(v1.type)
console.log(v1.value)
v1.type = "button"
v1.value = "变为按钮"
}
// 操作样式
function op_Style() {
var v2 = document.getElementById("text1")
// 语法： 元素.style.样式名 = ""
v2.style.color = "green";
v2.style.borderRadius = "30px"; // 在css中用横线 - 连接的样式名在js中要采用驼峰式命名 eg:border-radius -> borderRadius
}
// 操作文本
function op_Text() {
var v3 = document.getElementById("div01")
// 语法 元素名.innerText 只识别文本
// or 元素名.innerHTML 识别文本的同时可以识别HTML代码
console.log(v3.innerText)
console.log(v3.innerHTML)
v3.innerText = "你好"
v3.innerText = "<h1>你好</h1>"
v3.innerHTML = "<h1>你好</h1>"
}
</script>
<style>
#text1 {
color: red;
}
</style>
</head>
<body>
<input id="text1" type="text" value="hello">
<hr>
<button onclick="op_attribute()">操作属性</button>
<button onclick="op_Style()">操作样式</button>
<button onclick="op_Text()">操作文本</button>
<div id="div01">
hello
</div>
</body>
</html>