节点操作|正则表达式

节点操作

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>