获取元素
- 获取父元素(离子元素最近的父亲)
- 子元素.parentNode
- 获取子元素
获取全部子元素
- parentNode.childNodes(标准,若要获得元素节点 需要专门处理 很麻烦)
- parentNode.children(非标准、兼容性有要求 推荐使用)
获取第一个和最后一个子元素
获取第一个
- parentNode.firstElementChild
获取最后一个
- parentNode.lastElementChild
实际开发写法
- parentNode.children[0]
- 获取兄弟节点
- node.nextElementSibling(返回下一个兄弟节点)
- node.previousElementSibling(返回上一个兄弟节点)
- 创建节点
- Document.createElement(‘tagName’)
5.添加节点
- node.appendChild(child) 后面追加元素
Node (父级) child(子级)
- Node.inserBefore(child,指定元素)
ol.insertBefore(lili, ol.children[0])
页面中要添加一个元素
首先要 1.创建一个元素 2.然后添加!
6.删除节点
Node.removeChild(child)
ol.removeChild(ol.children[0])
this.disabled = true;//禁用条件
7.复制节点
Node.cloneNode()
括号里面 如果为空或者为false 是浅拷贝,不复制里面内容
如果括号里为true 则是深拷贝 复制里面的内容
- 三种动态创建元素区别
- Document.write() 在文本中写入一个标签 (用的较少) 创建元素
1.直接将内容写入页面的内容流,但是文档执行完毕,会导致页面重绘,重新开启新的页面
- Element.innerHTML 创建元素
- Document.createElement()
InnerHTML和createElement(‘a’)区别
区别在于执行时间不同
拼接字符串用的时间较长
- innerHTML是讲内容写入某个DOM节点,不会导致页面全部重绘
- InnerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
采用数组的形式
3.createElement()创建多个元素效率稍低一点点但是结构更清晰