前端之JavaScript 补充
1. BOMwindowlocation.href = "https://www.sogo.com"location.reload() // 重新加载当前页 location.hrefDOMdocument1. 节点分为:文档节点 document文本节点 标签的文本属性节点 id, class ...标签节点 div,span, h1 ...2. 寻找节点1. 基本查找标签名:document.getElementsByTagNameID: document.getElementByIDclass名: document.getElementsByClassName2. 间接查找我的上一个标签: previousElementSibling我的下一个标签: nextElementSibling我的父标签: parentElement我的子标签: children我的第一个子标签:firstElementChild我的最后一个子标签:lastElementChild2. 修改标签属性或样式1. 修改文本信息ele.innerText 获取文本节点的内容(包括子标签的文本)ele.innerText="字符串" 修改标签的文本信息2. 文档内容(HTML内容)ele.innerHTML 获取文档内容ele.innerHTML=“<h1>好</h1>” 赋值HTML内容3. 修改样式1. classListele.className 获取所有的class类名(字符串类型)ele.classList 获取所有的class类名ele.classList.contains(cls) 判断有没有某个classele.classList.add(cls) 添加一个class类名ele.classList.remove(cls) 删除class类名ele.classList.toggle(cls) 切换(有就删除,没有就添加)2. ele.style.样式=""注意:有中横线的CSS样式要转成驼峰形式ele.style.backgroundColor="red"4. 属性ele.attributes 获取所有的属性信息2. RegExp(正则) 1. 正则表达式不能加空格2. 当你设置了全局的g标志位,需要注意lastIndex --> 每一次匹配上之后会把lastIndex设置为下一位索引值3. undefined他帮你转成"undefined"来做正则校验
View Code
一、节点操作
常用的节点主要为document和element,上一篇内容我们讲述了节点的查找和节点属性的操作,本节则主要列述节点本身的创建、增加、删除、替换等操作。
1、创建节点
通过如下语法可以创建一个元素标签,可以对创建的元素标签进行赋值操作和属性操作,应用实例如下:
var ele_img=document.createElement("img"); //创建节点对象ele_img,为img标签元素 ele_img.src="meinv.jpg"; //标签属性的赋值操作,也可以通过原生JS的方式进行 ele_img.height="400"; ele_img.width="250";
2、增加节点
增加节点操作首先需要找到一个父级节点,对父级节点进行增加节点操作,因为增加节点时需要有新的节点对象,即待被增加的节点标签,故其通常和创建节点一起使用,应用实例如下:
var ele_outer=document.getElementsByClassName("outer")[0]; //获得一个父级节点ele_outer var ele_append=document.getElementsByClassName("append")[0]; //通过绑定事件形式触发增加节点 ele_append.οnclick=function () {var ele_img=document.createElement("img"); //创建待插节点ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.appendChild(ele_img)//追加节点,会将节点追加在最后};
上述append节点的方式会把增加的节点追加在父级节点中所有子标签的最后面,如果需要指定增加位置,需要用insertchild的方式,此时需要指定一个已存在的子标签,实例如下:
var ele_outer=document.getElementsByClassName("outer")[0];//获得一个父级节点 var ele_p=document.getElementsByTagName("p")[0]; //获得父级节点下的一个子节点,作为插入节点参考节点 var ele_append=document.getElementsByClassName("append")[0]; ele_append.onclick=function () {var ele_img=document.createElement("img");//创建待插节点ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.insertBefore(ele_img,ele_p) //插入节点,语法顺序为:(待插入节点,参考节点)};
3、删除节点
同样删除节点也是需要指定父级节点,通过移除其某个子级元素的方式将某个子级元素进行删除,具体实例如下:
var ele_outer=document.getElementsByClassName("outer")[0]; //获得一个父级节点对象 var ele_p=document.getElementsByTagName("p")[0];//获得父级标签下的一个子级节点对象 var ele_delete=document.getElementsByClassName("delete")[0]; ele_delete.onclick=function () {ele_outer.removeChild(ele_p) //删除节点};
4、节点替换
节点替换也是需要找到一个父级节点,对节点下的某本来存在的个子标签进行替换,当然还需创建一个新替换标签,替换掉需要被替换的元素,具体应用实例如下:
var ele_outer=document.getElementsByClassName("outer")[0];//获得一个父级节点对象 var ele_p=document.getElementsByTagName("p")[0]; //获得父级节点下一个需要被替换的子节点对象 var ele_replace=document.getElementsByClassName("replace")[0]; ele_replace.onclick=function (){var ele_h1=document.createElement("h1"); //创建一个新替换对象ele_h1.innerText="美女系列";ele_outer.replaceChild(ele_h1,ele_p)//替换节点,语法顺序为(新替换节点,旧被替换节点)}
5、复制节点
具体实例如下:
var ele_outer=document.getElementsByClassName("outer")[0]; var ele_copy=ele_outer .cloneNode();console.log(ele_copy) //结果即为outer父级标签,不包含任何子标签 var ele_copy=ele_outer .cloneNode(true);console.log(ele_copy)//结果为outer父级标签,包含所有子标签
二、模态框实例
1、事件委派
通常我们为了给某类标签元素绑定事件时,我们都是逐一或者通过循环的方式给其进行绑定事件操作,但是这种方式会带来一个问题是:后来插入的同类型标签也xu要有这样的事件时,之前绑定的事件的结果对后插入的同类元素无效,原因是程序在启动时已经加载了之前绑定事件的代码,那时后来新添加的元素并不在其中。
此问题就可以通过事件委派的方式进行解决,所谓事件委派就是通过一定形式对其父级标签进行委派(绑定事件),其结果就是父级下的所有后代都可以执行事件的内容,可以通过条件限制使得只有满足条件的后代元素才能执行事件内容。应用实例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <button class="add">添加</button> <ul class="outer"><li>111</li><li class="c2">222</li><li>333</li> </ul> <script>//无条件事件委派:父级节点ele_outer下的所有后代都会在被点击时会执行alert,即使后来插入的数据var ele_outer=document.getElementsByClassName("outer")[0];ele_outer.addEventListener("click",function (event) {alert(event.target.innerText) //event.target等价于this });//条件事件委派:通过条件限制,对父级中的后代选择性进行执行,如下只有classname="c2"的才会执行事件var ele_outer=document.getElementsByClassName("outer")[0];ele_outer.addEventListener("click",function (event) {if(event.target.className=="c2"){alert(event.target.innerText)}});//插入数据事件var ele_add=document.getElementsByClassName("add")[0];ele_add.onclick=function () {var ele_li=document.createElement("li");ele_li.innerText="444";ele_outer.appendChild(ele_li)} </script> </body> </html>
转载于:https://www.cnblogs.com/jassin-du/p/8145440.html
前端之JavaScript 补充相关推荐
- 【黑马程序员pink老师前端】JavaScript对象
java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
- 前端之JavaScript基础
前端之JavaScript基础 JavaScript 将js文件引入页面 外部引入 写在文件内部 行内引入 querySelector语法格式 window.onload 变量 数据类型 JS注释 运 ...
- 关于前端使用JavaScript无法实现canvas打印问题的解决
关于前端使用JavaScript无法实现canvas打印问题的解决 参考文章: (1)关于前端使用JavaScript无法实现canvas打印问题的解决 (2)https://www.cnblogs. ...
- 好程序员web前端分享javascript枚举算法
好程序员web前端分享javascript枚举算法,题目:在1,2,3,4,5 五个数中,我们随机选取 3个数.问有多少种取法?并且把每种取出数的方法列举出来. 乍看这道题,其实感觉没什么难度.三个f ...
- 【从0到1学Web前端】javascript中的ajax对象(一)
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
- 前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 ...
- JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
- 互联网公司前端初级Javascript面试题
互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点) JavaScript是一种基于对象(Object)和事件 ...
- javascript乘法和加法_Web前端:JavaScript中的NaN是什么?
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:JavaScript中的NaN是什么?",有兴趣做前端的朋友,一起来看看吧! JavaScript中的数字类型包含整数和 ...
最新文章
- SAP QM 执行事务代码QS23为检验特性分配Selected Set的时候报错 - You cannot use entries from catalogs 1 and 3-
- 关于meta的一些知识
- python编程难吗-Python、C+这些编程语言难吗?十岁女孩告诉你答案
- 【Python】如何在文件夹里批量替换文本中的内容?
- oracle连接的内存,简单查看oracle的连接情况和内存使用情况 -电脑资料
- 5. 深入研究 UCenter API 之 MVC 网站下的用法(转载)
- (十三)RabbitMQ使用详解
- LeetCode 276. 栅栏涂色(DP)
- c enum能像java一样吗_不一样的Java Enum
- PHP 会话 线程 进程,php进程后台调用(多线程/进程)
- NUC980开发板Linux系统EC20模块 移植 串口 PPP拨号
- mysql @符号_quot;Incorrect string value quot; mysql 乱码 my插入emoji Yii2
- iOS UIDatePicker
- 在安卓模拟器(mumu为例)上联调app并且用Charles抓包
- 新概念二册 Lesson 29 Taxi!出租汽车! (复习现在完成时)
- 面向对象的15位、18位中国大陆身份证号码解析、验证工具
- python图片转换成文字的手机软件_怎么把手机里的图片转换成WORD?迅捷文字识别帮你解决!...
- cmd通过安装choco 安装 helm
- 阿里云服务器续费流程及折扣
- ios使用地图定位记录运动轨迹
热门文章
- java shape用法_Java PShape.scale方法代码示例
- springboot打包不同环境配置与shell脚本部署
- 计算机网络多线程通信,多线程技术的PLC与PC的通讯方式
- php的mpdf开发实例,mpdf自动分页加页码的方法
- node 跨域请求设置
- mysql 删除视图 命令_在MySQL中,删除视图使用(????)命令。
- comsol积分函数_怎样在COMSOL中实现时间和空间积分
- 之全能忙内_临沧大名山茶:喝过诸多忙肺茶,但你不知道什么是“隔年香”
- 面试题总结15 自己构建一个哈希表
- 基于边缘的图像分割——分水岭算法(watershed)算法分析(附opencv源码分析)