目录
什么是DOM
DOM全称文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。通过DOM接口可以改变网页的内容、结构和样式
获取元素
获取目标元素
<div></div>
<div class="box"></div>
<div id="box"></div>
<script>
var box = document.getElementsByTagName('div')
var box = document.querySelector('div') //通过标签名获取
var box = document.getElementsByClassName('box')
var box = document.querySelector('.box') //通过class获取
var box = document.getElementById('id')
var box = document.querySelector('#box') //通过id获取
</script>获取目标元素内容
<div id="box">123456798</div>
<script>
//第一种方式
var box = document.querySelector('#box');
alert(box.innerText);
//第二种方式
alert(box.innerHTML);
</script>
操作元素属性
- 对象.src = ‘目标地址’; (可以通过此语句改变目标文件，比如切换图片等)
- 对象.href = ‘目标链接’; (可以通过该语句改变目标网页)
- 对象.alt = ‘目标替换文本’; (在图片信息改变的时候，这个同时设置)
- 对象.title = ‘目标图片提示信息’;（在图片改变的时候，他的提示信息也是改变的
操作表单属性
- 对象.type = ‘更换表单类型’;
- 对象.value = ‘更换表单的内容’ ； // 此时要注意修改表单的内容可不是修改他的innerHTML哦!
- 对象.disabled = ‘true’; // 可以设置表单是否不可用，默认为false 为可用
操作样式属性
<div id="box">123456798</div>
<script>
// 点击目标盒子，显示一个红色背景
var box = document.querySelector('#box');
box.onclick = function() {
this.style.backgroundColor = 'red';
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<style>
/*设置红色背景的样式*/
.red {
background-color: red;
}
</style>
</head>
<body>
<div id="box">123456798</div>
<script>
// 通过给目标盒子添加red的样式类，来改变他的背景
var box = document.querySelector('#box');
box.onclick = function() {
this.className = 'red';
}
</script>
</body>
</html>节点
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）
添加和创建节点
<body>
<ul>
<li></li>
</ul>
<script>
var li = document.createElement('li') //创建由 tagName 指定的 HTML 元素
var ul = document.querySelector('ul')
ul.appendChild(li) //将一个节点添加到指定父节点的子节点列表的末尾
var lili = document.createElement('li')
ul.insertBefore(lili,ul.children[0]) //将一个节点添加到父节点的指定子节点前面
</script>
</body>
删除节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul')
ul.removeChild(ul.children[2]) //从DOM中删除一个子节点，返回删除的节点
</script>
</body>
复制节点
<body>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
var ul = document.querySelector('ul');
var a = ul.children[2].cloneNode(true);
ul.appendChild(a);
</script>
</body> 
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
