码迷,mamicode.com
首页 > 其他好文 > 详细

dom操作

时间:2018-04-20 13:26:51      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:input   tmp   打印   use   user   get   mic   inpu   属性   

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‘

 

dom操作

标签:input   tmp   打印   use   user   get   mic   inpu   属性   

原文地址:https://www.cnblogs.com/laosun0204/p/8889521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!