day12
2.正则对象
2.1正则量词
-
a? 匹配前面的字符0次或者1次 a这个字符可有可无
// 1. a? 匹配前面的字符0次或者1次 a这个字符可有可无 var reg = /\d?/;// 匹配0-9之间的数字 这个数字可有可无 var str = "1web"; var str = "1we4b"; console.log(reg.test(str));// true // 验证网址 \转义 让符号失去原本的意义 var reg = /https?:\/\/www\.baidu\.com/;// https可以 http也可以 var str = "https://www.baidu.com"; var str = "http://www.baidu.com"; console.log(reg.test(str));//true
-
a* 匹配前面的字符0次或者多次 尽可能的多匹配
// 2.a* 匹配前面的字符0次或者多次 尽可能的多匹配 var reg = /a*/g; var str = "aaaaa1aaaaaa1"; console.log(reg.exec(str));//"aaaaa"
-
a+ 匹配前面的字符至少1次
// 3 a+ 匹配前面的字符至少1次 // 验证网址 var reg = /https?:\/\/www\.\w+\.com/; var str = "https://www.jd.com"; var str = "http://www.12306.com"; var str = "http://www.taobao.com"; console.log(reg.test(str));//true
2.2或和分组
-
或 |
// 或 | var reg = /https?:\/\/www\.\w+\.com|net|org|cn/; var str = "http://www.jd.cn"; var str = "http://www.jd.com"; var str = "http://www.a.com"; var str = "cn";//true 但是不是我们想要的效果 因为把 | 左右的式子当成了一个整体 console.log(reg.test(str));// true
-
分组 ()
// 分组 () var reg = /https?:\/\/www\.\w+\.(com|net|org|cn)/; var str = "cn";// false var str = "http://www.baidu.com" console.log(reg.test(str));
2.3前瞻后顾
-
前瞻
-
前瞻
-
前瞻(?=a) 正向肯定预查 后面必须要跟a字符
-
// 前瞻(?=a) 正向肯定预查 后面必须要跟a字符 var str = "www36com34"; var reg = /\d(?=\d)/g;// 检测数字 数字后面必须跟数才满足条件 console.log(reg.exec(str));//3 console.log(reg.exec(str));//3 输出的是第二个3 console.log(reg.exec(str));//null
-
负前瞻
-
负前瞻(?!a) 正向否定预查 后面不能跟a字符
-
// 负前瞻(?!a) 正向否定预查 后面不能跟a字符 var str = "www36com34"; var reg = /\d(?!\d)/g;// 检测数字 数字后面不能跟数字才满足条件 console.log(reg.exec(str));// 6 console.log(reg.exec(str));// 4 console.log(reg.exec(str));// null
-
-
后顾
-
后顾
-
后顾(?<=a) 反向肯定预查 前面必须跟a字符
-
// 后顾(?<=a) 前面必须跟a字符 var str = "www36com34"; var reg = /(?<=\d)\d/g;// 检测数字 前面必须跟数字 console.log(reg.exec(str));// 6 console.log(reg.exec(str));// 4 console.log(reg.exec(str));// null
-
负后顾
-
负后顾(?<!a) 反向否定预查 前面不能跟a字符
-
// 负后顾(?<!a) 前面不能跟a字符 var str = "www36com34"; var reg = /(?<!\d)\d/g; //检测数字 前面不能跟数字 console.log(reg.exec(str));//3 console.log(reg.exec(str));//3 console.log(reg.exec(str));//null
-
3.DOM
3.1DOM简介
DOM 文档对象模型(document object model) 主要提供一些api方法来操作html文档
3.2DOM原理
-
DOM为了方便开发者操作html文档 对文档进行了抽象化处理 将html文档抽象化成一个树状结构,经过抽象之后 我们返现每一个标签都变成了树状结构中的一个节点 我们可以通过各种方法来获取节点,document就是一个对象 这个对象就是指html文档
3.3DOM获取元素
3.3.1get系列获取元素
-
document.getElementById("id名") 获取整个文档下的id名的元素 可以获取到一个
-
document.getElementsByTagName("标签名") 获取整个文档下该标签名的元素
-
document.getElementsByClassName("类型名") 获取整个文档下该类名的元素
3.3.2query系列获取元素
==不支持IE低版本==
-
querySelector
-
document.querySelector("css选择器") 在任意范围内 通过css选择器 获取该类型的元素集合中的第一个
-
// 1.获取元素 var list = document.querySelector("ul");// 获取整个文档下的里 console.log(list); var list = document.querySelector(".box"); console.log(list);//<li class="box">这是第2个li标签</li> // 只想获取wrap下的第一个li var list = document.querySelector("#wrap li"); console.log(list);// <li>1</li>
-
querySelectorAll
-
document.querySelectorAll("css选择器") 在任意范围内 通过css选择器 获取该类型的元素集合
-
// 2 var list = document.querySelectorAll("li"); console.log(list);//NodeList(9) [li.box, li.box, li.box, li, li, li, li, li, li] var list = document.querySelectorAll("#wrap li"); console.log(list);// NodeList(3) [li, li, li]
3.3.3get系列和query系列的区别
-
get动态获取元素 后续有添加或者删除元素 都能实时获取 get是支持ie低版本
-
query静态获取元素 后续有添加或者删除元素 不能实时获取 query是不支持ie低版本
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <button>添加</button> <script> // 1.get系列获取li var getLi = document.getElementsByTagName("li"); console.log(getLi);//HTMLCollection(3) // 2.query系列获取li var queryLi = document.querySelectorAll("li"); console.log(queryLi);// NodeList(3) // 3.给ul追加li标签 var btn = document.getElementsByTagName("button")[0]; var list = document.getElementsByTagName("ul")[0]; /* get动态获取元素 后续有添加或者删除元素 都能实时获取 get是支持ie低版本 query静态获取元素 后续有添加或者删除元素 不能实时获取 query是不支持ie低版本 */ btn.onclick = function(){ list.innerHTML+="<li>4</li>"; console.log(getLi,"get系列");//HTMLCollection(4) [li, li, li, li] 'get系列' console.log(queryLi,"query系列");//NodeList(3) [li, li, li] 'query系列' } </script>
3.4DOM获取节点
3.4.1 获取子节点
-
父元素.children
-
作用:获取子元素节点
// 1.父元素.children 获取子元素节点 var child1 = list.children; console.log(child1);//HTMLCollection(5) [li, li, li, li, li]
-
-
父元素.childNodes
-
作用:获取父元素下的所有子节点
// 2.父元素.childNodes 获取所有的节点 var child2 = list.childNodes; console.log(child2);//获取的是所有的子节点(包括文本节点 注释节点 元素节点)
-
-
==DOM中的节点分类==
-
元素节点 html文档所有标签抽象出来的都是元素节点
-
属性节点 标签的属性抽象出来是属性节点
-
文本节点 html文档中的文本内容抽象出来都是文本节点(包括空格和换行符)
-
注释节点 注释内容抽象出来是注释节点
-
-
==判断节点的类型==
-
语法 节点.nodeType
-
元素节点 1
-
属性节点 2
-
文本节点 3
-
注释节点 8
-
// 3.判断节点类型 节点.nodeType var type = child2[3].nodeType; console.log(type);//1 元素节点 var type = child2[0].nodeType; console.log(type);//3 文本节点 var type = child2[1].nodeType; console.log(type);//8 注释节点
-
-
获取节点名称
-
语法:节点.nodeName
// 4.判断节点名称 节点.nodeName var name = child2[0].nodeName; console.log(name);// #text 文本节点 var name = child2[1].nodeName console.log(name);//#comment 注释节点 var name = child2[7].nodeName console.log(name);"DIV" //元素节点获取的标签名的大写
-
-
获取或者设置节点内容
-
语法:获取 节点.nodeValue 设置 节点.nodeValue = 值
-
==注意:元素节点无法获取和设置内容 因为元素节点有自己的方法==
// 5.设置或者获取节点内容 获取 节点.nodeValue 设置 节点.nodeValue = 值 var value = child2[0].nodeValue; console.log(value);// 213 var value = child2[1].nodeValue; console.log(value);// 这是li标签 var value = child2[3].nodeValue; console.log(value);// null 元素节点的文本内容 标签.innerHTML 标签.innerText //设置 child2[0].nodeValue = "456"; child2[1].nodeValue = "456";
-
3.4.2 获取父节点
-
子节点.parentNode
-
获取直接父元素
-
-
子节点.offsetParent
-
获取最近定位父元素 如果没有定位父元素则是获取body
-
var oSpan = document.querySelector("span"); // 1.获取直接父元素 子元素.parentNode console.log(oSpan.parentNode);// p // 2.获取最近定位父元素 如果没有定位父元素则是获取body console.log(oSpan.offsetParent);// p
3.5操作节点
3.5.1追加节点
==存在问题 :innerHTML有覆盖原有内容的缺点 后续追加的内容会把原先的事件覆盖掉==
==解决方法 :在原有的结构后面直接追加标签 追加节点就能解决这个问题==
-
创建节点
-
创建元素节点 document.createElement("节点名称")
-
创建文本节点 document.createTextNode(文本内容)
-
<script> // 1.创建元素节点 document.createElement("节点名称") var a = document.createElement("div"); console.log(a); // 2.创建文本节点 var b = document.createTextNode("123"); console.log(b); </script>
-
追加节点
-
父元素.appendChild(要添加的子节点)
-