dom操作

Posted 2020-10-31 laosun0204

DOM(Document Object Model 文档对象模型)

dom对象实际就是将html标签转换成了一个文档对象，可以通过dom对象中js提供的方法，找到html的各个标签，通过找到标签就可以操作标签使页面动起来，让页面动起来

使用chrome浏览器，右键检查，在Console里面操作，输入document，点击回车，出来#document，展开#document就是html源码

直接获取标签：

document.getElementById(‘inner1‘) # 获取id为inner1的标签

document.getElementsByTagName(‘div‘) # 根据标签名称获得标签数组

document.getElementsByClassName(‘inner‘) # 根据class属性获取标签数组

document.getElementsByName(‘username‘) # 根据name属性获取标签数组

在javascript里var是声明一个局部变量，var tmp = document.getElementById(‘inner1‘)，输入tmp回车打印出一个div标签，输入tmp.children，回车打印出一个list，HTMLCollection(2) [span, input]，包含两个标签，列表取值tmp.children[1].value = ‘哈哈哈‘，就是把placeholder里的值修改了并在文本框里显示

间接获取标签：

var tmp = document.getElementById(‘inner1‘)

tmp.parentElement # 父节点标签元素

tmp.children # 所有子标签

tmp.firstElementChild # 第一个子标签元素

tmp.lastElementChild # 最后一个子标签元素

tmp.nextElementSibling # 下一个兄弟标签元素，修改place的值：tmp.nextElementSibling.children[1].value = ‘sun‘