1.正则对象
1.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
1.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));
1.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 - 后顾
2.DOM
2.1DOM简介
DOM 文档对象模型(document object model) 主要提供一些api方法来操作html文档
2.2DOM原理
- DOM为了方便开发者操作html文档 对文档进行了抽象化处理 将html文档抽象化成一个树状结构,经过抽象之后 我们返现每一个标签都变成了树状结构中的一个节点 我们可以通过各种方法来获取节点，document就是一个对象 这个对象就是指html文档
2.3DOM获取元素
2.3.1get系列获取元素
- document.getElementById(“id名”) 获取整个文档下的id名的元素 可以获取到一个
- document.getElementsByTagName(“标签名”) 获取整个文档下该标签名的元素
- document.getElementsByClassName(“类型名”) 获取整个文档下该类名的元素
2.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]
2.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>
2.4DOM获取节点
2.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 注释节点 - 语法 节点.nodeType
-
获取节点名称
- 语法：节点.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";
2.4.2 获取父节点
- 子节点.parentNode
- 获取直接父元素
- 子节点.offsetParent
- 获取最近定位父元素 如果没有定位父元素则是获取body
var oSpan = document.querySelector("span");
// 1.获取直接父元素 子元素.parentNode
console.log(oSpan.parentNode);// p
// 2.获取最近定位父元素 如果没有定位父元素则是获取body
console.log(oSpan.offsetParent);// p
2.5操作节点
2.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(要添加的子节点)
<script>
// 1.将文本节点追加到元素节点中
var a = document.createElement("div");//创建元素节点
var b = document.createTextNode("123");//创建文本节点
// 将文件节点追加到元素中
a.appendChild(b);
console.log(a);
// 将div显示在页面上
document.body.appendChild(a);
// 2.直接给元素节点设置内容
var a1 = document.createElement("li");
a1.innerHTML = "123";
console.log(a1);
// 将li追加到页面上
document.body.appendChild(a1);
</script>
扫一扫
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
