节点操作
1.节点操作之获取节点对象
1-1,获取当前标签中所有的子级节点
执行结果,是一个伪数组,可以forEach()
形式是与 querySelectorAll() 获取的伪数组是一样的
标签对象.childNodes
<div name="div" index="1" href="aaa" checked>我是标签div
<!-- 我是注释2 -->
<span>我是标签span</span>
</div>
<!-- 我是注释3 -->
<p>我是标签p</p>
<script>
// 获取节点对象的方法
var oDiv = document.querySelector('div');
console.log( oDiv.childNodes );//结果:NodeList(5) [text, comment, text, span, text]
</script>
1-2,获取当前标签中,所有的元素节点/标签节点
执行结果,是一个伪数组,不能forEach()
oDiv.children
结果:HTMLCollection [span]
1-3,获取当前标签中,第一个节点
执行结果,是一个对象,内容形式与DOM操作方式,获取的内容是一样的
oDiv.firstChild
结果:#text
document.querySelector('span') ;
1-4,获取当前标签中,最后一个节点
执行结果,是一个对象,内容形式与DOM操作方式,获取的内容是一样的
oDiv.lastChild
结果:#text
1-5,获取当前标签中,第一个标签节点,其他节点不会获取
oDiv.firstElementChild
结果:<span>我是标签span</span>
1-6,获取当前标签中,最后一个标签节点,其他节点不会获取
oDiv.lastElementChild
1-7,获取当前标签,上一个兄弟节点(找哥哥)
如果没有执行结果是null
oDiv.previousSibling
1-8,获取当前标签,下一个兄弟节点(找弟弟)
如果没有执行结果是null
oDiv.nextSibling
1-9,获取当前标签,上一个兄弟元素节点(找标签哥哥)
oDiv.previousElementSibling
1-10,获取当前标签,下一个兄弟元素节点(找标签弟弟)
oDiv.nextElementSibling
1-11,获取当前标签,父级节点
只获取直接父级节点
oDiv.parentNode
document.querySelector('span').parentNode
1-12,获取当前标签,所有属性节点
执行结果,是一个伪数组,不能forEach()
oDiv.attributes
2.节点操作之类型名称内容
// 节点的类型: 对象.nodeType 属性中存储,数据是 一个数值
// 元素节点/标签节点 : 1
// 属性节点 : 2
// 文本节点 : 3
// 注释节点 : 8
// 节点的名称: 对象.nodeName
// 元素节点/标签节点 : 大写字母的 标签名称
// 属性节点 : 小写字母的 属性名称
// 文本节点 : #text
// 注释节点 : #comment
// 节点的内容: 对象.nodeValue
// 元素节点/标签节点 : null
// 属性节点 : 属性的属性值
// 文本节点 : 文本内容,包括换行和空格
// 注释节点 : 注释内容,包括换行和空格
3.节点的操作 (新增 删除 克隆 写入)
3-1.节点的创建
创建标签节点:
document.createElement('标签名称');
创建文本节点:
document.createTextNode('要创建的文本内容');
现在创建的是一个对象,要操作标签的内容,属性属性值等,必须要通过对象的方法来设定
<div>我是建立的div标签</div>
<script>
var oDiv = document.createElement('div');
// 使用操作对象的方式,给标签添加设定
oDiv.id = 'div1';
// setAttribute,来设定自定义属性
oDiv.setAttribute('index' , 1);
console.dir(oDiv);
var oText = document.createTextNode('要创建的文本内容');
console.log(oText);
</script>
3-2.删除节点 删除当前标签中的子级节点
当前标签.removeChild('你要删除的节点')
3-3.克隆节点 克隆复制当前节点对象
只克隆标签本身
当前标签.cloneNode();
克隆标签以及标签内容
当前标签.cloneNode(true);
3-4.写入节点
当前标签.appendChild(你要写入的标签对象)
在当前标签结束位置写入
当前标签.insertBefore(你要写入的标签对象 , 在哪个子级标签前)
在当前标签,子级标签之前,写入一个标签对象,只会出现在最后一次写入的位置
相对对于将一个标签对象,多次写入,从上一个位置,会移动到下一个位置
只会出现在最后一个位置
<script>
var d = document.querySelector('div');
d.appendChild(oText);
d.insertBefore(oDiv , d.firstChild);
d.appendChild(oDiv);
</script>
正则表达式
1.正则表达式的基本语法
1-1,字面量(常用)
使用 // 来包裹表达式内容 var 变量 = /正则表达式/
1-2,构造函数
var 变量 = RegExt(‘正则表达式’);
2.正则表达式的使用方法
2-1,验证
判断字符串内容是否符合正则表达式的规范
执行结果是 布尔类型
语法 :
正则表达式.test('字符串内容');
2-2,捕获
捕获获取字符串中符合正则表达式规范的内容
执行结果是捕获获取到的符合规范的字符串内容
语法 : 正则表达式.exec(‘字符串内容’)
3.正则表达式,常用语法规范
3-1,元字符
使用一些符号,来表示规范
\d 表示数值,数字 | \D 表示非数字
<script>
// 只要有数字即可,不用都是数字
var reg1 = /\d/ ;
// console.log(reg1.test('123456')) ;//ture
// console.log(reg1.test('abcd')) ;//false
// console.log(reg1.test('1234abcd')) ;//true
//有不含数字的内容也为ture
var reg2 = /\D/;
// console.log(reg2.test('1234abcd')) ;//true
</script>
\w 表示数字,字母,下划线 | \W 表示非数字,字母,下划线
<script>
var reg3 = /\w/;
// console.log( reg3.test('123avbc_') );//true
// console.log( reg3.test('!@#$%^') );//false
// console.log( reg3.test('1234!@#$%^') );//true
var reg4 = /\W/;
...
</script>
\s 表示空格 | \S 表示非空格
<script>
var reg5 = /\s/;
// console.log( reg5.test(' ') );//true
// console.log( reg5.test('312斤kfjisa') );//false
// console.log( reg5.test('312斤 kfjisa') );//true
var reg6 = /\S/;
...
</script>
. 表示非换行
正则表达式和转义符,都是 \内容的形式 | 正则表达式和转义符不会冲突
<script>
var reg7 = /./;
// console.log( reg7.test('\n') );
</script>
3-2.边界符
^ 表示开头 | $ 表示结尾
<script>
// 以数字开头即可,之后的内容,不做限定
var reg1 = /^\d/;
// console.log(reg1.test('123'));//ture
// console.log(reg1.test('abc123'));//false
// 以数字结尾,就看结尾,之前有什么内容不管
var reg2 = /\d$/;
// console.log(reg2.test('123'));//ture
// console.log(reg2.test('123abc'));//false
// 如果开头结尾都加上了,限定效果就不同了
// 只能有一个字符串,并且这个字符是数字 只能有一个数字字符
// 字符个数,内容,不符合都不行
var reg3 = /^\d$/;
// console.log(reg3.test('1'));//ture
// console.log(reg3.test('123'));//false
// console.log(reg3.test('123abc'));//false
</script>
3-3.限定符
限定出现次数
一般都要和边界符配合使用,否则执行效果有问题
<script>
// * 表示允许的次数是 0 至 正无穷次 有没有都行
// + 表示允许的次数是 1 至 正无穷次 至少有一个
// ? 表示允许的次数是 0 至 1 最多有一次
// {n} 表示允许的次数是 n 次 n的数值,是自定义数值
// {n,} 表示允许的次数是 n 次以上,包括n次 最少是n次,多个不管 也就是 n 至 正无穷 次
// {n,m} 表示允许的次数是 n 至 m 次 包括n和m
// 只能是数字字符,字符个数没有要求
var reg4 = /^\d*$/;
// console.log( reg4.test('') );//ture
// console.log( reg4.test('123') );//ture
// console.log( reg4.test('123abc') );//false
// 必须是数字字符,至少出现1个数字字符
var reg5 = /^\d+$/;
// console.log( reg5.test('1') );//ture
// console.log( reg5.test('') );//false
// 必须是数字字符,最多只能有0个或者1个字符
var reg6 = /^\d?$/;
// 只能是3个数字字符
var reg7 = /^\d{3}$/;
// 必须都是数字字符,并且至少有一个数字字符
var reg8 = /^\d{1,}$/;
// 都是数字,1至3次
var reg9 = /^\d{1,3}$/;
</script>
3-4正则表达式的特殊符号
1,\
可以表示正则表达式的规范,或者是转义符 , 设定是不冲突的,符合哪个就执行哪个
2, |
表示逻辑或的关系
内容,可以是数字,字母,下划线,字符只要是3个就行,不能少,可以多
var reg1 = /^(\d|\w){3}$/;
3, ()
将()中的内容作为一个整体,来执行,确保执行正确
4, []
在[]中设定的内容,任意满足其中一个就可以
内容只能是 a b c d 4个字符,多了不可以
var reg2 = /^[abcd]$/;
5,-
表示在这个范围内的就可以 a-d
a-d之间的字符,只能是一个
var reg3 = /^[a-d]$/;
6, [^内容]
表示 非内容
字符范围不再 a-d 之前,并且是一个字符
var reg4 = /^[^(a-d)]$/;
7,i
忽略大小写 /正则表达式/i
8, g
全局匹配 /正则表达式/g
4.正则表达式之其他配合函数
4-1, search()
字符串查找函数,在字符串中,查找是否有符合的内容,如果有,返回下标,没有返回-1返回的是第一个符合内容的索引下标 indexOf() 也是查找,也返回索引下标,但是不支持正则表达式
<script>
var str1 = 'abcdefgab';
// 默认是区分大小写的
// console.log( str1.search('ab') );//返回a的索引0
// console.log( str1.search('B') );
// 正则表达式,不区分大小写
// console.log( str1.search(/B/i) );
// indexOf() 不支持正则表达式
</script>
4-2, match()
找到符合规范的字符串,并且返回内容 , 默认只会执行一次,并且返回第一次符合规范的内容
<script>
var str2 = 'abcdefgabcdefg';
var arr1 = str2.match('ab');//获取1个ab
// 正则表达式,匹配全局
var arr2 = str2.match(/ab/g);//获取所有ab
</script>
4-3, replace()
字符串替换,默认只替换第一个符合的内容
<script>
var str3 = 'abcd曹abcd曹abcd曹abcd';
// 默认值替换第一个
// str3 = str3.replace('曹' , '*');//abcd*abcd曹abcd曹abcd
// 正则表达式,替换全局
str3 = str3.replace( /曹/g , '*');//abcd*abcd*abcd*abcd
</script>