一、节点操作

节点层次

1.父节点 parentNode

2.子节点

3.兄弟节点

创建节点

添加节点

删除节点

复制节点

三种动态创建元素区别

一、节点操作

利用节点的层级关系获取元素

利用父子兄弟节点关系获取元素
逻辑性强，但是兼容性稍差

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3（文本节点包含文字、空格、换行等）

实际开发中，节点操作主要操作的是元素节点。

节点层次

利用DOM树可以把节点划分为不同的层次关系，常见的是父子兄层级关系。

1.父节点 parentNode

得到的是离元素最近的父节点，如果找不到父节点则返回null。

2.子节点

父元素.childNodes(标准）

得到的是一个集合，包含所有的子节点，包含文字节点和元素节点等。

如果只想要获得里面的元素节点，则需要专门处理。所有我们一般不提倡使用childNodes

        var ul = document.querySelector('ul');for (var i = 0; i < ul.childNodes.length; i++) {if (ul.childNodes[i].nodeType == 1) {//ul.childNodes[i]是元素节点console.log(ul.childNodes[i]);}}

父元素.children(非标准）

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（重点掌握）。

虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用。

父元素.firstChild  //返回第一个子节点，找不到则返回null。同样也是包含所有的节点父元素.lastChild   //返回最后一个子节点，找不到则返回null。同样也是包含所有的节点父元素.firstElementChild   //返回第一个子元素节点，找不到则返回null，IE9以上支持父元素.lastElementChild   //返回最后一个子元素节点，找不到则返回null，IE9以上支持

实际开发写法：

父元素.children[0]  //第一个
父元素.children[长度-1】 //最后一个

3.兄弟节点

节点.nextSibling    //返回下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点节点.previousSibling   //返回上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点节点.nextElementSibling   //返回当前元素下一个兄弟元素节点，找不到返回null，IE9以上支持节点.previousElementSibling   //返回当前元素上一个兄弟元素节点，找不到返回null，IE9以上支持

解决方法：

封装一个兼容性的函数

创建节点

        document.createElement('tagName')

创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点

父节点.appendChild(子节点)    //将节点添加到指定父节点的子节点列表末尾父节点.insertBefore(插入的元素,指定元素) 将节点添加到指定父节点的指定子节点前面

        //1.创建节点var li=document.createElement('li');//2.添加节点var ul=document.querySelector('ul');ul.appendChild(li);//3.前面添加节点var lili=document.createElement('li');ul.insertBefore(lili,ul.children[0]);

删除节点

父节点.removeChild(要删除的子节点)   //从DOM中删除一个子节点，返回删除的节点

复制节点

要复制的节点.cloneNode()    //返回调用该方法的节点点的一个副本，也称为克隆节点/拷贝节点

注意：

如果括号为空或者false为浅拷贝，只复制标签不复制内容
如果括号里为true为深拷贝，则复制标签及内容

三种动态创建元素区别

        document.write() //直接将内容写入页面的内容，但是文档流执行完毕，则它会导致页面全部重绘   element.innerHTML //将内容写入某个DOM节点，不会导致页面全部重绘。创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂document.createElement() //创建多个元素效率低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率比createElement高。

【前端】JavaScript-节点操作相关推荐

Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍...
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
3.JavaScript核心BOM操作学习（界面交互功能）——JavaScript获取自定义的方法，开始进行节点操作
今天事情比较多,学习的东西比较少第三天继续 H5新增获取自定义的方法 <body><div getTime="20" data-index="2&qu ...
html dom节点取父节点,JavaScript DOM父子兄节点操作必看详解
首先我们知道网页中的所有内容都是节点(标签.属性.文本.注释等) ,之前我们已经说过了一些元素的获取方法比如element.getElementById(),element.querySelecto ...
web前端(5)：了解jQuery(常见选择器+相关尺寸+元素/节点操作)
文章目录一.jQuery是什么二.JQuery的常见选择器三.JQuery的元素操作四.相关尺寸函数五.常用的事件方法 1. 绑定事件的两种方式 2.解除绑定六.节点操作七.经典案例 1 ...
JavaScript——DOM之节点操作
节点操作前述: 一.节点的概述二.节点操作 1.节点层级 2.案列-下拉菜单 3.兄弟节点 4.创建节点 5.删除节点 6.案列 :留言并且删除节点 7.复制节点 8.案例:动态生成表格 9.三种 ...
Javascript 【操作元素、节点操作】
Javascript 4. 操作元素 4.5 排他思想案例:百度换肤案例:表格隔行变色案例:表单全选取消全选案例 4.6 自定义属性的操作 1. 获取属性值 2. 设置属性值 3. 移除属性案 ...
13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
JavaScript的节点操作 —— 增加节点
目录 JavaScript中的节点操作分为:增.删.改.查(获取),四大类型. 我们直接利用案例来学习: HTML布局代码: JavaScript代码实现: 第一步:获取所有要用到的元素对象(可以利用 ...
JavaScript里的父、子节点操作源码解析
父.子节点操作.兄弟节点 1.节点概述 <!DOCTYPE html> <html lang="en"><head><meta chars ...

【前端】JavaScript-节点操作

一、节点操作

节点层次

1.父节点 parentNode

2.子节点

3.兄弟节点

创建节点

添加节点

删除节点

复制节点

三种动态创建元素区别

【前端】JavaScript-节点操作相关推荐

最新文章

热门文章