JavaScript day03 正则和DOM编程1

一、内置对象

5.Regular Expression对象(正则表达式对象)

5.1构建正则表达式对象

直接量方式

/正则表达式/修正符

构造函数方式

new RegExp(‘正则表达式’,‘修正符’)

5.2正则表达式

5.2.1元字符

\d,匹配数字,等价于[0-9]

\D,匹配非数字,等价于[^0-9]

\s,匹配任意的空白字符,等价于[\n\r\t\v\f]

\S,匹配任意的非空白字符,等价于[^\n\r\t\v\f]

\w,匹配任意的字母、数字及下划线,等价于[0-9a-zA-Z_]

\W,匹配任意的非字母、数字及下划线,等价于[^0-9a-zA-Z_]

., 匹配除换行外的任意字符

5.2.2量词

?,出现零次或一次,等价于{0,1}

*,至少出现零次,等价于{0,}

+,至少出现一次,等价于{1,}

{m},出现m次

{m,},至少出现m次

{m,n},至少出现m次,至多n次(m<=x<=n)

5.2.3其它

|,或者

^,以指定字符开头

$,以指定字符结尾

[…],表示在范围之内,如[0-9]

[^{…],表示不在范围之内,如[}3-5]

5.2.4转义符

\n,换行

\r,回车

\t,水平制表符

\v,垂直制表符

\f,换页(走纸)

\,反斜线

.,点

|,竖线

*,星号

?,问号

5.2.5捕获组与非捕获组

(…)

(?:…)

5.2.6修正符

g(global),全局

i(ignore),忽略大小写


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正则表达式</title>
	<script type="text/javascript">
		//反向引用
		var str = 'a1111b2555c3d4';
		str = str.replace(/(\d+)/g,'<span style="color:red">$1</span>');
		document.write(str);
		//证明捕获组的编号顺序为依次左侧括号的顺序
		var date = '7/3/2018'; //月/日/年
		//用一条语句将其输出成"2018-12-25"
		var str = date.replace(/(((\d{2})\/(\d{2}))\/(\d{4}))/,'<p>1表示$1</p><p>2表示$2</p><p>3表示$3</p><p>4表示$4</p>,5表示$5');
		document.write(str + '<hr>');
		//面试题
		
		var date = '7/3/2018';
		date = date.replace(/(\d{1,})\/(\d{1,})\/(\d{4})/,'$3-$1-$2');
		document.write('中文日期格式是:' + date);
	</script>
</head>
<body>	
</body>
</html>

5.3方法

test()

描述:检测字符串是否符合正则表达式规范

语法:bool object.test(string)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正则表达式</title>
	<script>
		//检测"数字"是否为正整数
		var n = '123';
		var bool = /^[1-9]\d*$/.test(n);
		console.log(bool);
	</script>
</head>
<body>
	
</body>
</html>

二、DOM编程

1.基础

DOM(Document Object Model),文档对象模型

JavaScript由ECMAScript(简称ES)、DOM和BOM组成;

ECMAScript:关键字、保留关键字、流程语句、数据类型、内置对象;

DOM:提供操作HTML/XML文档相关的API;

DOM由DOM Core、HTML DOM和XML DOM组成;

DOM Core:提供处理HTML和XML文档的API;

HTML DOM:提供处理HTML文档的API;

XML DOM:提供处理XML文档的API;

2.节点(Node)

在DOM树中一切皆节点;

节点的类型:

1,代表元素节点(指HTML标记)

2,代表属性节点(指HTML标记的属性)

3,代表文本节点(指纯文本)

8,代表注释节点(指HTML注释)

9,代表文档节点(指整个HTML文档)

3.节点的关系

子节点:一个节点是另一个节点的直接下一级节点;

如…

父节点:一个节点是另一个节点的直接上一级节点;

兄弟节点:同一个父节点的所有子节点

4.节点

4.1属性

nodeName

描述:获取节点的名称

语法:string node.nodeName

nodeValue

描述:获取节点值

语法:string node.nodeValue

nodeType

描述:获取节点的类型

语法:int node.nodeType

childNodes

描述:返回节点内所有的子节点形成的集合(数组)

语法:NodeList node.childNodes

4.2方法

appendChild()

描述:追加子节点

语法:Node node.appendChild(node)

说明:返回的是新插入的子节点

removeChild()

描述:删除子节点

语法:Node node.removeChild(node)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM编程</title>
	<script>
		function removeParagraph(){
			//获取对象
			var pEle = document.getElementById('p');
			//删除对象
			document.body.removeChild(pEle);		
		}
	</script>
</head>
<body>
	<p id="p">我是段落</p>
	<input type="button" value="单击我,删除段落" onclick="removeParagraph()">
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM编程</title>
	<script>
		function empty(){
			//1.获取对象
			var divEle = document.getElementById('div');
			//2.获取DIV内子节点的数量
			
			for(var n=0;n<divEle.childNodes.length;n++){
				divEle.removeChild(divEle.childNodes[n]);
				n--;
			}

		}
	</script>
</head>
<body>
	<p>我是段落</p>
	<div style="border:2px solid #f00" id="div">
		<h1>11</h1>
		<p>22</p>
		<p>33</p>
		<p>44</p>
		<div>
			<ul>
				<li><a href="#">AA</a></li>
				<li><a href="#">BB</a></li>
				<li><a href="#">CC</a></li>
			</ul>
		</div>
	</div>
	<p>我也是段落</p>
	<input type="button" value="单击我,删除DIV内所有的子节点" onclick="empty()">
</body>
</html>

5.document对象(继承自Node)

5.1 属性

documentElement

描述:返回文档的根元素

语法:Element document.documentElement

5.2 方法

getElementById()

描述:根据对象ID来获取元素

语法:Element document.getElementById(string id)

createElement()

描述:创建元素节点

语法:Element document.createElement(string tagName)

6.Element对象(继承自Node)

6.1方法

getAttribute()

描述:获取属性值

语法:string Element.getAttribute(string name)

setAttribute()

描述:设置属性

语法:void Element.setAttribute(string name,string value)

removeAttribute()

描述:删除属性

语法:void Element.removeAttribute(string name)

hasAttribute()

描述:返回是否存在指定属性

语法:bool Element.hasAttribute(string name)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性</title>
	<script>
		function changeLinkAttr()
		{
			//1.获取对象
			var linkEle = document.getElementById('link');
			//2.设置属性
			linkEle.setAttribute('href','http://www.baidu.com');
			linkEle.setAttribute('target','_blank');
		}
	</script>
</head>
<body>
	<p><a href="#" id="link">百度</a></p>
	<p><input type="button" value="单击我,让链接可用" onclick="changeLinkAttr()"></p>

	
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM编程</title>
	<script>
		function createImage(){
			//1.创建图像元素
			var imageEle = document.createElement('img');
			//2.设置属性
			imageEle.setAttribute('src','images/5b42bdfeN98916c29.jpg');
			//3.为body元素追加刚刚新建的图像
			document.body.appendChild(imageEle);
		}
	</script>
</head>
<body>
	<input type="button" value="单击我,可以创建图像" onclick="createImage()">

</body>
</html>
'''

JavaScript day03 正则和DOM编程1

猜你喜欢