DOM学习
DOM全称是Document Object Model 文档对象模型，就是把文档中的标签，属性，文本，转换为对象来管理
大纲
- HTML DOM(文档对象模型)
- document对象
- HTML DOM结点
具体案例
HTML DOM(文档对象模型)
document对象
使用innerText获取标签内部的文本内容
使用innerHtml获取内部的标签和文本
下面是一些方法(具体请见万维)
第一个例子
这里获取对象使用的是通过name获取，这样可以获取到一组对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多选框</title><script type="text/javascript">javascript">function selectAll(){// 获取到复选框（这里要求name相同）var sports = document.getElementsByName("sport");// sport是什么？是nodeList 即一个集合// 拿到sports集合进行遍历for (var i = 0;i < sports.length;i++){sports[i].checked = true;}}function selectNone(){// 获取到复选框（这里要求id相同）var sports = document.getElementsByName("sport");// sport是什么？是nodeList 即一个集合// 拿到sports集合进行遍历for (var i = 0;i < sports.length;i++){sports[i].checked = false;}}function selectReverse(){// 获取到复选框（这里要求id相同）var sports = document.getElementsByName("sport");// sport是什么？是nodeList 即一个集合// 拿到sports集合进行遍历for (var i = 0;i < sports.length;i++){sports[i].checked = !sports[i].checked;}}</script>
</head>
<body>
你会的运动项目：
<input type="checkbox" name="sport" value="zq" checked="checked">足球
<input type="checkbox" name="sport" value="tq">台球
<input type="checkbox" name="sport" value="ppq">乒乓球<br><br>
<button onclick="javascript language-javascript">selectAll()">全选</button>
<button onclick="javascript language-javascript">selectNone()">全不选</button>
<button onclick="javascript language-javascript">selectReverse()">反选</button>
</body>
</html>
HTML DOM结点
这里面具有很多属性和方法，具体可以参考万维
常用属性
