js下 Day03、DOM操作--节点方法
语法:parentNode.appendChild(child)
功能:向父节点的子节点列表的末尾添加新的子节点
语法:parentNode.removeChild(child)
功能:从子节点列表中删除某个节点
语法:document.createElement(‘标签名’)
功能:创建元素节点
语法:parentNode.insertBefore(新节点,被插队的节点)
功能:在已有的子节点前插入一个新的子节点
语法:parentNode.replaceChild(新节点,被替换的节点)
功能:替换节点
语法:document.createTextNode(‘文本内容’)
功能:创建文本节点
语法:元素.cloneNode(true)
功能:克隆一个节点
#一.课堂案例
#1.轮播图
效果图:
功能思路分析:
1.选中项下标初始化为0,随着切换方式的改变而改变
2.封装公用切换方法,排他思想给所有导航信息和图片去掉类名,给当前选中项加上类名
3.点击导航信息,修改选中项下标,调用切换方法
4.点击左右按钮,修改选中项下标,调用切换方法
5.设置定时器,修改选中项下标,调用切换方法
#2.五大校区
效果图
功能思路分析:
\1. 找到所有的复选框循环绑定点击事件
\2. 每一个复选框都有选中和取消选中两种状态。在选中时,创建对应的内容到上面的盒子;取消选中时删除被创建的元素。
\3. 判断点击的每一个复选框的checked属性,为真表示选中,为假表示取消选中。
\4. 选中后,创建一个p标签(**document.createElement( ** ‘p’)),设置p标签的内容为复选框下一个元素兄弟(nextElementSibling)的内容,将p标签放入上面的盒子中(appendChild());
\5. 取消选中时,找到所有被选中的p标签,循环每一个跟当前点击的复选框的下一个元素兄弟的内容进行比较,相同则删除(removeChild())
#二.今日小结
1.创建节点: document.createElement() document.createTextNode()
2.插入节点: 父元素.appendChild() 父元素.insertBefore()
3.删除克隆节点: 父元素.removeChild() 元素.cloneNode()
js下 Day03、DOM操作--节点方法的更多相关文章
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- JS核心之DOM操作 下
目录: 1.节点类型之Document类型 2.节点类型之Element类型 3.节点类型之Text类型 4.综合小示例 -- 动态添加外部样式文件 5.查找元素的扩展方法 接上篇,我们先来看常用的三 ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...
- JS核心之DOM操作 上
JS一个重要功能就是操作DOM, 改变页面显示. 目录: 1.基本概念 2.节点类型 3.节点关系 4.节点操作 基本概念 DOM全称为Document Object Model ,即文档对象模型,是 ...
- 【2017-03-28】JS基础、DOM操作
一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
随机推荐
- pandas 生成html文档,支持可添加多个表
如何通过pandas生成html格式?如何通过pandas生成html文件文件中包含多个表单Balance_64_data = pd.read_sql(Balance_64_sql,engine)df ...
- 【MathType教学】表示分类的大括号怎么打
大括号是一种常见的数学符号,可以用于集合.分段函数中,其实大括号还可以用来总结数学知识,比如对三角形进行分类,此时用的大括号可以称为表示分类的大括号.MathType作为专业的数学公式编辑器,可以快速 ...
- GIF图保存下来不会动?用Folx的浏览器捕获下载功能试试!
表情包大多是GIF格式的动图,有时候使用浏览器的另存为保存完发现并不能动态播放,怎么办呢?试试Folx提供的浏览器捕获下载功能,就能将各种格式的图片,包括GIF动图的下载链接捕获下来,供进一步下载使用 ...
- request封装
request封装 import requests class RequestsHandler: def __init__(self): self.session = requests.Session ...
- Android应用测试指南
一.Android 的 SDK Windows 版本安装 按顺序安装以下内容 1. 安装JDK(Java Development Kit, 即Java开发工具包) 2. 安装Eclipse 集成 ...
- yii2.0验证码的两种实现方式
第一种方式:采用model 1. 模型:Code.php <?phpnamespace app\models; use yii\base\Model;class Code extends Mod ...
- 决胜IT十八招-前言
决胜IT十八招 走资讯这一行转眼间八年多了,从大学的时候,我有长达十年的时间思索在从事软体开發这一行到底怎麽存活下来,这思考下来,为自己总算找到一个出口来,这十八招只是其一的绝学,见阵这一行干软体开發 ...
- T-SQL——基础语法
目录 0. 定义变量 1. 批处理 2. 条件逻辑--IF 3. 逻辑分支--CASE 4. 循环语句--WHILE 5. 附录--关于CASE表达式的实现函数 6. 参考 shanzm-2020年1 ...
- MongoTemplate 移除 _class 字段
@Configuration public class ApplicationReadyListener implements ApplicationListener<ContextRefres ...
- Codeforces Round #688(Div 2) D. Checkpoints
思路 第一步,先推导1,0,0,--,0,就是1后面跟了n-1个0的时候 所需要的期望步数 封闭式推导 \(f_n\)代表从n关开始直接通关需要的步数的期望 n为1的情况,即就只有一个1 \(f_1= ...