一、简介
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。
二、Dom直接选择器
2.1 查找标签
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
2.2 事例
<body> <div id="i1">冰镇西瓜汁</div> <a>aaa</a> <a>bbb</a> <a>ccc</a> </body>
(1)根据ID获取标签
tag = document.getElementById('i1') <div id="i1">冰镇西瓜汁</div>
(2)根据标签名称获取标签(或集合)
document.getElementsByTagName('a') HTMLCollection(3) [a, a, a] document.getElementsByTagName('a')[0] <a>aaa</a>
(3)使用innerText获取标签内容
var tag = document.getElementById('i1') undefined tag.innerText "冰镇西瓜汁"
(4)标签对象.innerText="新值"
替换原来标签的文本内容
var tag = document.getElementById('i1') undefined tag.innerText = "盖被吹空调" "盖被吹空调"
(5)循环获取标签集合中的内容
var tags = document.getElementsByTagName('a') undefined for(var i in tags){ console.log(tags[i].innerText);} aaa bbb ccc