JavaScript--Dom直接选择器

时间：2023-03-09 20:53:24
JavaScript--Dom直接选择器

一、简介

　　文档对象模型（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 = "盖被吹空调"

"盖被吹空调"

　　JavaScript--Dom直接选择器

　　（5）循环获取标签集合中的内容　

var tags = document.getElementsByTagName('a')

undefined

for(var i in tags){

    console.log(tags[i].innerText);}

     aaa

     bbb

     ccc

　　

相关文章