JavaScript DOM
- DOM(Document Object Model)：文档对象模型。
- 将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
Element元素的获取操作：
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script>
//1. getElementById() 根据id属性值获取元素对象
let elementById = document.getElementById("div1");
alert(elementById);
//2. getElementsByTagName() 根据元素名称获取元素对象们，返回数组
let elementsByTagName = document.getElementsByTagName("div");
alert(elementsByTagName.length);
//3. getElementsByClassName() 根据class属性值获取元素对象们，返回数组
let getElementsByClassName = document.getElementsByClassName("cls");
alert(getElementsByClassName.length);
//4. getElementsByName() 根据name属性值获取元素对象们，返回数组
let elementsByName = document.getElementsByName("username");
alert(elementsByName.length);
//5. 子元素对象.parentElement属性 获取当前元素的父元素
let body = elementById.parentElement;
alert(body);
</script>
Element元素的增删改操作：
具体方法
代码实现：
<body>
<select id="s">
<option>---请选择---</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</body>
<script>
//1. createElement() 创建新的元素
let option = document.createElement("option");
//为option添加文本内容
option.innerText = "深圳";
//2. appendChild() 将子元素添加到父元素中
let select = document.getElementById("s");
select.appendChild(option);
//3. removeChild() 通过父元素删除子元素
// select.removeChild(option);
//4. replaceChild() 用新元素替换老元素
let option2 = document.createElement("option");
option2.innerText = "杭州";
select.replaceChild(option2, option);
</script>
Attribute属性的操作：
具体方法：
代码实现
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性的操作</title>
<style>
.aColor {
color: blue;
}
</style>
</head>
<body>
<a>点我呀</a>
</body>
<script>
//1. setAttribute() 添加属性 返回的是一个数组，可以在后面直接加索引取出来
let a = document.getElementsByTagName("a")[0];
a.setAttribute("href", "https://itzhuzhu.com");
//2. getAttribute() 获取属性
let value = a.getAttribute("href");
alert(value);
//3. removeAttribute() 删除属性
a.removeAttribute("href");
//4. style属性 添加样式 但是这种方式添加样式不灵活
a.style.color = "red";
//5. className属性 添加指定样式 通过类选择器这种方式比较灵活
a.className = "aColor";
</script>
Text文本的操作：
具体方法
代码实现：
<body>
<div id="div"></div>
</body>
<script>
//1. innerText 添加文本内容，不解析标签 只能加普通文本 比如是不能加粗啊
let div = document.getElementById("div");
div.innerText = "呵呵，我是第div";
//2. innerHTML 添加文本内容，解析标签，可以设置样式 这个比较叼
div.innerHTML = "<b>我粗吗</b>"
</script>