这次给大家带来dom属性的使用方法,dom属性使用的注意事项有哪些,下面就是实战案例,一起来看一下。
一、javascript的三大核心1.ecmascript js的语法标准
2.dom document object model 文档对象模型,提供的方法可以让js操作html标签
3.bom browser object model 浏览器对象模型,提供的方法让js可以操作浏览器
注意:1. js里最大的boss是window,document只是window下的一个对象
document.documentelement 这个东西可以拿到html
document(在文档里,document是老大)
|
html
/ \
/ \
/ \
body head
/ / | \
/ / | \
/ / | \
/ | \ meta title style...
/ | \
/ | \
p p ul...
/
/
a
二、dom的属性js ---> dom --> html
js通过dom去操作html标签
childnodes 返回当前对象下的所有子节点对象,会返回文本节点
注意: 在ie8下只会返回元素节点
nodetype 返回节点类型,元素节点返回1 文本节点返回3 注释节点返回8
children 返回对象下所有子元素节点,并且没有兼容问题
firstchild 返回第一个子节点,在ie8跟childnodes一样的表现
lastchild 返回最后一个子节点 同上
firstelementchild 返回最后一个元素节点,不兼容ie8
nextsibling 下一个兄弟节点 在主流的浏览器,可能会拿到除了元素节点以外的节点,在ie8里,只会返回元素节点,如果没有就返回null
previoussibling 上一个兄弟节点 同上
nextelementsibling 下一个兄弟元素节点 如果没有返回null 不兼容ie678
previouselementsibling 上一个 同上
parentnode * 返回父节点 没有兼容性
offsetparent 返回定位父级,如果都没有找到,最后返回body上,没有兼容问题
13.nodename 返回标签的构造器 标签名大写字母
三、dom的一些方法createelement(‘p’)这个里面是标签
新建元素节点,需要接受一个参数,参数就是需要新建的标签。
createtextnode()新建文本节点
createcomment()新建注释节点
节点操作添加元素节点
1. 父级.appendchild(子节点)
把子节点添加到父节点里去 往父级的所有子元素节点后 追加一个节点
2. 父级.insertbefore(子节点, 指定的子节点)
添加到指定的节点前面
父级.removechild(需要删除的节点)
1.克隆节点 clonenode
克隆节点, 克隆母体.clonenode()
函数接收一个参数,这个参数是一个布尔值,默认false,浅复制, true深度复制
浅复制:只复制标签
深度复制:把跟这个标签对象相关的一些标签的行内的信息一起复制,不会复制js里的自定义属性。
这是我对dom学习的笔记,如果能够帮助到你,我会非常高兴。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
javascript之优化dom
微信小程序怎么实现数据双向绑定
javascript的字符串怎样使用
以上就是dom属性的使用方法的详细内容。