博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

DOM 操作

Posted on 2018-07-29 17:27  alex_hrg  阅读(137)  评论(0编辑  收藏  举报

1、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素(列表)document.getElementsByTagName('div')
获取多个元素(列表)document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合

b. 间接
tag = document.getElementById('i1')

parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

2、操作标签

a. innerText

获取标签中的文本内容
标签.innerText

对标签内部文本进行重新复制

标签.innerText = ""

b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式

PS:

<div onclick='func();'>点我</div>
<script>
function func(){

}

</script>

c. checkbox 重复框
获取值
  checkbox对象.checked
设置值
  checkbox对象.checked = true