Dom 获取、Dom动态创建节点
一、Dom获取
1、全称:Document Object Model 文档对象模型
2、我们常用的节点类型
元素(标签)节点、文本节点、属性节点(也就是标签里的属性)、
3、document有个属性叫nodeType返回的是数字
1:代表元素节点
2:代表属性节点
3:代表文本节点
4、节点的获取
元素节点的获取方法
Document.getElementById()
Document.getElementsByClassName()
Document.getElementsByTagName()
Document.querySelector()
Document.querySelectorAll()
属性节点的获取方法
元素 . getAttribute("属性名") 获取属性值的方法
元素 . attribuites 获取元素身上所有属性构成的集合(数组)
元素 . attribute [ 索引 ] . value 获取元素里面的值
元素 . setAttribute("属性名","属性值") 给元素设置属性和属性值
元素 . remove("属性") 删除元素
文本节点没有获取的方法,没有意义
5、获取元素的子节点
元素 . childNodes 这个属性有兼容性,标准浏览器回获取文本节点,而低版本的浏览器不会,所以建议children属性
获取单个子节点:具有兼容问题
获取第一个子节点:
标准下:元素 . firstElementchild
非标准下:元素 . firstchild
获取最后一个子节点:
标准下:元素 .lastElementchild
非标准下:元素 . lastchild
获取上一个兄弟节点:
标准下:元素 . previousElementsibling
非标准下:元素 . previoussibling
获取上一个兄弟节点:
标准下:元素 . nextElementchild
非标准下:元素 . nextchild
解决兼容性问题:
拿获取第一个子节点为列:
var list=document . getElementById("list")
var ss=list . firstElementchild || list . firstchild
6、获取父节点
元素 . parentNode 没有兼容性
二、Dom 动态创建节点
1、生成节点的方法:
document . createElement("div")
2、插入节点的方法:
父节点 . appendChild("新节点")
3、在指定的位置插入节点
父节点 . inserBefore(新节点,谁的前面) 将元素插入指定节点的前面
4、删除节点
父节点 . removechild()
三、拓展
字符串中的拼接和Dom创建都是渲染的方试
字符串:
优点:简单,可以处理数据,层次感比较强
缺点:字符串拼接会影响到原来子元素的事件
Dom创建:
优点:是一个独立的个体,不会影响到原来的元素
缺点:处理数据量过大会比较麻烦,会造成Dom回流
Dom回流:
页面渲染时,我们对html结构简单的增删查改时,浏览器会对所有的dom重新排序,这就是Dom回流,严重影响浏览器的性能
提升页面性能优化:
1、多采用雪碧图
2、阻止超链接的默认行为
3、减少DOM回流
4、减少向服务器请求次数
最新文章
- 深入浅出JavaScript之this
- bootstrap学习笔记--bootstrap安装环境
- 关于GC和析构函数的一个趣题
- jQuery--选择器总结
- Java多线程系列--“JUC锁”09之 CountDownLatch原理和示例
- nodeschool.io 2
- 【Linux C中文函数手册】之 内存和字符串函数
- OC基础12:数字、字符串和集合1
- OpenVPN-ng,为移动续航的应用层隧道
- 获得正在编辑行的数据 esayui datagrid
- RIP 相对寻址
- 《k8s-1.13版本源码分析》- Scheduler启动前逻辑
- p1305 新二叉树
- Python 30分钟快速入门指南
- Bootstrap动态轮播
- android之发送Get或Post请求至服务器接口
- freeswitch编译mod_av模块
- MISRA-C 2012 Amendment 1
- nSum “已知target再求和”类型题目总结:n-2重循环+left/right
- [翻译] ABCIntroView
热门文章
- DedeCms如何调用Discuz论坛主题等数据方法总结
- codeforces 437A. The Child and Homework 解题报告
- kafka条件查询excel拼接
- 关于布局(Layout)的一切
- SPOJ:Eagle and Dogs(求树上每个点最远可以走到哪里---树的直径||DP)
- [Selenium] Explicit wait 方法
- flask的config配置和给实例化传入参数
- 【旧文章搬运】PspCidTable攻与防
- 任务24:WebHost的配置
- 关于Android ListView组件中android:drawSelectorOnTop含义(转载)