JavaScript对象正则表达式 DOM

最新推荐文章于 2024-05-14 16:11:02 发布

aoteman_6

最新推荐文章于 2024-05-14 16:11:02 发布

阅读量108

点赞数

文章标签：正则表达式 javascript 开发语言

本文链接：https://blog.csdn.net/aoteman_6/article/details/127038861

版权

正则表达式的边界匹配器：以^开头，以$结尾

如果没有写清边界，则从整段字符串中匹配是否有满足正则表达式的内容

而不是从头开始匹配（类似String的contains()方法）

var reg1 = /^[0-9]{4}$/;
var reg2 = /[0-9]{4}/;
String str = "a5324";
var boolean1 = reg1.test(str);        //返回:false
var boolean2 = reg2.test(str);        //返回:true

reg1表示的是：第一位开始到最后是4位数字

reg2表示的是：整个字符串包含4位连续的数字

正则数量词：用大括号{}括起来的数字，就表示前一个类型出现的次数

{n}	恰好出现n次
{n,}	至少出现n次
{n,m}	出现n~m次
"+"	至少出现1次
"*"	出现了0~n次
"?"	出现0~1次

var reg1 = /^a{1}$/;            //匹配一个a字符
var reg2 = /^a{1,}$/;           //匹配至少一个a字符
var reg3 = /^a{1,5}$/;          //匹配1-5个a字符
var reg4 = /^a+$/;              //匹配至少1个a字符
var reg5 = /^a*$/;              //匹配0~n个a字符
var reg6 = /^a?$/;              //匹配0~1个a字符
var reg7 = /^a$/;               //没有写清数量词，则表示匹配1个a字符

正则范围词：[ ]表示一个字符的取值范围

\d	匹配所有数字：[0-9]
\w	匹配所有字符和下划线：[A-Za-z0-9_]

正则表达式中"."代表匹配任意字符，若仅是想匹配"."这个字符，需要将他转译"\."这样就是匹配一个"."符号

var reg1 = /^\d$/;            //匹配所有数字
var reg2 = /^\w$/;            //匹配所有数字英文字符和下划线_
var reg3 = /^.$/;             //匹配任意字符
var reg4 = /^\.$/;            //匹配一个.字符

定义好了正则表达式，用正则表达式变量调用test("字符串")

就可以与传递的字符串进行匹配，若相互匹配则返回true，不正确返回false

var reg = /^\w\d{5}$/;
var boolean = reg.test("a54905");         //返回true

在提交表单时，使用正则表达式给每一个表单项作判断，全都满足正则表达式才允许提交表单

先给每一个表单项添加onblur属性，让表单失去焦点时就会调用函数检验表单数据是否满足

然后给<form>标签中添加一个onsubmit属性<form οnsubmit="return checkAll()">

让checkAll()方法调用全部检验表单的函数，全都返回true时才允许表单提交

DOM文档对象编程
其实浏览器在加载html对象时，加载标签后都会将这些标签对象保存在document（文档树）对象中

通过标签的属性获取节点对象：

document.getElementById(“id”) 通过id属性到唯一的元素

<sciprt type="text/javascript">
var div = document.getElementById("one");
</script>
<div id="one">通过id属性获取对象</div>

如果页面上有多个同名的id，则得到第1个元素

document.getElementsByName(“name”) 通过name属性得到一组标签，返回一个数组

<sciprt type="text/javascript">
var arr = document.getElementsByName("one");
</script>
<div name="one"></div>
<a name="one">通过name属性获取对象</a>

获取到所有name属性为"one"的对象，返回一个集合

document.getElementsByTagName (“标签名”) 通过标签名字得到一组标签，返回一个数组

<sciprt type="text/javascript">
var arr = document.getElementsByTagName("div");
</script>
<div></div>
<div>通过标签名获取对象</div>

document.getElementsByClassName("类名") 通过类名得到一组标签，返回一个数组

<sciprt type="text/javascript">
var arr = document.getElementsByClassName("one");
</script>
<div calss="one"></div>
<div class="one">通过class属性获取对象</div>

获取到标签元素，便可以对标签的数据或标签体的内容进行修改

有标签体的标签（非闭合标签）：

元素.innerHTML：可以用来赋值也可以用来获取标签体的内容，并且可以输出HTML标签内容

<div id="one">aaa</div>
<script type="text/javascript">
    var div = document.getElementById("one");
    var html = div.innerHTML;            //获取到id为one的标签体内容aaa
    div.innerHTML = "<a href="#">往标签体内添加了标签内容</a>";
</script>

元素.innerText：可以用来赋值也可以用来获取标签体的内容，只能输出文本不能输出HTML标签文本

<div id="one">bbb</div>
<script type="text/javascript">
    var div = document.getElementById("one");
    var text = div.innerText;             //获取到标签体内容bbb
    div.innerText = "往标签体内添加了文本内容";
</script>

无标签体的标签（闭合标签）：

要修改无标签体的标签内容例：<input typetext="text" id = "one"/>这类文本框内的内容

其实就是使用元素对象来修改闭合标签的value属性

var one = document.getElementById("one");
one.value = "aa";                //给闭合标签的value属性赋值

想给标签的其他属性赋值，就要去找api文档找html标签属性对应js是什么了

通过上述方式获取到元素对象后，同样可以对对象内的标签元素进行操作：

以下示例都使用此HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="one">
    <!-- 注释-->
    <a href="#"></a>
</div>
</body>
</html>

childNodes	得到当前元素下的所有子节点
children	得到当前元素下的所有标签元素
parentNode	得到当前元素的父节点
nodeName	得到节点的名称
nodeType	得到节点的类型

childNodes不仅会获取标签元素，还会获取空白文本元素和注释元素

var div = document.getElementById("one");
var arr = div.childNodes;
for (var i = 0;i<arr.length;i++){
    document.write("节点名："+arr[i].nodeName+"  节点类型："+arr[i].nodeType);
    document.write("<br/>");
}

输出结果：

节点名：#text 节点类型：3
节点名：#comment 节点类型：8
节点名：#text 节点类型：3
节点名：A 节点类型：1
节点名：#text 节点类型：3

见nodeName的结果#text就是开发工具上的空白文本，#comment是注释元素

对应nodeType3位空白文本，8位注释元素，1是标签元素

平时开发中我们仅需要标签元素，而不需要空白文本等元素，可以使用children

var div = document.getElementById("one");
var arr = div.children;
for (var i = 0;i<arr.length;i++){
    document.write("节点名："+arr[i].nodeName+"  节点类型："+arr[i].nodeType);
    document.write("<br/>");
}

输出结果：节点名：A 节点类型：1 （仅输出一个结果，就是a标签元素）

利用js代码在html上添加标签
document.createElement("标签名") 在文档上创建一个元素对象

元素对象.setAttribute("属性名", "属性值") 给元素添加一个属性名和属性值

var newElement = document.createElement("div");
newElement.setAttribute("id","two");

元素名不存在则是添加属性，存在则是修改属性值

父元素.appendChild(子元素) 将元素追加成父元素的最后一个子元素

var newElement = document.createElement("div");
var one = document.getElementById("one");
newElement.setAttribute("id","two");
one.appendChild(newElement);

父元素.removeChild(子元素) 通过父元素删除一个子元素

one.removeChild(newElement);

元素.remove() 元素删除本身

newElement.remove();

aoteman_6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对象正则表达式 DOM

元素对象.setAttribute("属性名", "属性值") 给元素添加一个属性名和属性值。要修改无标签体的标签内容例：这类文本框内的内容。其实浏览器在加载html对象时，加载标签后都会将这些标签对象保存在document（文档树）对象中。输出结果：节点名：A 节点类型：1 （仅输出一个结果，就是a标签元素）获取到标签元素，便可以对标签的数据或标签体的内容进行修改。
复制链接

扫一扫