Javascript之dom解析

最新推荐文章于 2024-11-21 09:59:30 发布

疯狂的猿

最新推荐文章于 2024-11-21 09:59:30 发布

阅读量784

点赞数

本文链接：https://blog.youkuaiyun.com/lsh609912726/article/details/8795545

版权

本文详细介绍了网页动态效果的实现方式，包括DOM、DHTML、BOM等核心技术，以及如何通过JavaScript、HTML、CSS等语言进行动态网页的开发与优化。重点探讨了事件处理、节点操作、表单验证等关键环节，旨在帮助开发者深入理解并掌握前端动态网页的开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. DOM:Document Object model:文档对象模型。是一个用于解析标记性文档的地址，可以将标记性文档封装成对象，并将文档中的所有内容封装成对象。变成对象想的好处就是在于可以对标记对象进行属性和行为定义，方便于操作该对象的内容，实现动态效果。

2. 静态网页和动态网页

a) 动态网页：动态网页是和服务端进行交互的，比如jsp.php.asp。

b) 静态网页：网页的动态效果：是网页的华丽效果，可以称为静态网页。

3. DOM中的树和节点：DOM树。节点也称作元素、对象、标签。要操作谁，就找到谁。

HTML中对象图解如下：

4. DHTML:动态html.包含了四项技术。

a) HTML:提供了标签，负责对数据进行封装。

b) css：提供了丰富的样式，负责的是页面的样式体现。包含了结构。

c) dom：提供了文档解析，负责将文档解析成对象，以及文档中的所有内容解析成对象。

d) javascript:提供了程序设计语言，负责将这些对象的使用，进行关联，让其具备逻辑性。

了解：当DHtml+XMLhttpRequest就是AJAX;

5. BOM:browser object model:将浏览器封装成对象。

window:调用该对象方法，不用写window.方法。直接写方法。

|--location:地址栏

href属性：链接到指定地址。

|--history:

|--document:

6. 第一种获取节点的方法：使用document对象获取节点。介绍几种常用对象的方法

a) document对象的常用方法

i. getElementById():获取对ID标签属性为指定值的第一个对象的引用

ii. getElementsByName():根据name便签属性的值获取对象的集合、

iii. getElementsByTagName():获取基于指定元素名的对象集合

iv. write():在指定窗口的文档中写入一个或多个HTML表达式

v. writeln():在指定窗口的文档中写入一个或多个HTML表达式，后面追加一个换行符

b) window对象的常用方法和属性：

i. alert():显示包含由应用程序自定义信息的对话框

ii. blur():使元素失去焦点并触发onblur事件

iii. close():关闭当前浏览器窗口或HTML应用程序

iv. confirm():显示一个确认对话框，其中包含一个可选的消息和确定取消按钮

v. focus():使得元素得到焦点并执行由onfocus事件指定的代码

vi. open():打开新窗口并装入给定的URL的文档

vii. prompt():显示一个提示对话框，其中带有一条消息和输入框。

c) 其他节点常用属性：

i. innerHTML:一个特殊的字符串内容显示在在开始和结束的指定标记之间，经常和fontcolor()搭配使用。

ii. innertext:一个文本内容显示在指定的开始和结束的指定标记之间，这里不能用其他html属性，只能显示文本。

iii. object[x].checked:一般用于多选和单选，返回的是布尔类型

d) 常用的事件注册：

i. onblur:点击其他对象时，失去当前的对象焦点。触发事件

ii. onclick:当鼠标左击按钮时，触发事件

iii. onsubmit:当这个form标签需要被提交时，触发事件

7. 第二种获取节点的方式：通过节点的层次关系获取。

a) 父节点：parentNode

b) 子节点：childNodes对应是一个集合。

c) 兄弟节点：

i. 上一个兄弟：previoisSibling

ii. 下一个兄弟：nextSibling

8. window对象的常用对象的属性和方法：

应用：对页面中的新闻进行自体大小的自定义设置。

思路：

1，通过html定义页面的结构，确定数据封装的位置。

2，通过css对页面进行指定样式。

3，确定事件源，确定事件，确定处理方式。

事件源：超链接。

事件：点击。通过javascript:void(0):取消超链接的默认点击效果，准备在超链接上自定义效果

处理方式：明确被操作的节点。是封装了新闻内容固定div。

<html>

<head>

<title>Untitled Document</title>

#news{

border:#0080ff 1px dotted;

width:530px;

padding:10px;

}

#newstitle{

margin:20px 0px;

}

#newstitle #divfont{

text-align:right;

}

#divfont a:link,#divfont a:visited{

color:#79bcff;

text-decoration:none;

}

#divfont a:hover{

color:#f1ab4b;

}

</style>

</head>

<body>

function changeFont(color,size){

//1,获取被操作的节点。

var divNode = document.getElementById("newstext");

// alert(divNode);

//2,改变该节点的字体大小。

divNode.style.color= color;

divNode.style.fontSize=size+"px";

//divNode.style.color=color;

}

</script>

<h2>这是新闻标题，禽流感了，禽都疯了</h2>

</div>

这是新闻内容，有很多！这是新闻内容，有很多！这是新闻内容，有很多！

</div>

</body>

</html>

9. 表单校验：

a) 填写完就校验。使用onblur事件。

b) 提示方式：直接在右侧进行提示。

c) 通过正则对输入的内容进行判断。

正则表达式的创建：

var reg=new RegExp(“^正则规则$”);

匹配：reg.test(“要匹配的字符”))

表单校验提交分为两种方式：

第一种：使用表单默认的提交方式：

<body>

var flag;//定义一个布尔值

function checkUser(){

var username=document.getElementsByName("user")[0].value;//用户名

var spanNode=document.getElementById("userID");//获得span的节点

var reg=new RegExp("^[a-z]{4}$");//定义一个正则表达式

if(reg.test(username)){

spanNode.innerHTML="用户名正确".fontcolor("green");

flag=true;

}else{

spanNode.innerHTML="用户名错误".fontcolor("red");

flag=false;

}

//这里是返回表单的true或者false

function check(){

if(flag){

return true;

}else{

return false;

}

//简写形式：return flag;

}

</script>

<!—

判断是否提交，要在form中添加return 方法；

-->

用户名：<input type="text" name="user" οnblur="checkUser()"/>

</form>

</body>

第二种：使用表单的自定义按钮：

<body>

function checkUser(){

var flag;

var username=document.getElementsByName("username")[0].value;

var spanNode=document.getElementById("userId");

var reg=new RegExp("^[a-z]{4}$");

if(reg.test(username)){

spanNode.innerHTML="用户名正确".fontcolor("green");

flag=true;

}else{

spanNode.innerHTML="用户名错误".fontcolor("red");

flag=false;

}

return flag;

}

function checkInfo(){

return checkUser();

}

function check(){

var formNode=document.getElementById("mysub");

if(checkUser()){//如果用户名正确，就让其按钮具备可提交性

formNode.submit();

}

</script>

用户名：<input type="text" name="username" οnblur="checkUser()"/>

</form>

</body>

应用：写一个注册表单校验，要求有姓名，性别，密码，重复密码，邮件地址.

<head>

.inputtext{

width:160px;

}

</style>

</head>

<body>

//为了代码的复用性，将代码提取出来

function checkinfo(name,spanid,reg,trueinfo,errorinfo){

var flag;

var inputNode=document.getElementsByName(name)[0].value;//输入的节点

var spanNode=document.getElementById(spanid);//span节点

if(reg.test(inputNode)){

spanNode.innerHTML=trueinfo.fontcolor("green");

flag=true;

}else{

spanNode.innerHTML=errorinfo.fontcolor("red");

flag=false;

}

return flag;

}

//校验用户名

function checkUser(){

var reg=new RegExp("^[a-z]{4}$");

return checkinfo("username","userId",reg,"用户名正确","用户名错误");

}

//校验密码

function checkPSW(){

var reg=new RegExp("^[0-9]{4}$");

return checkinfo("psw","pswId",reg,"格式正确","格式错误");

}

//校验确认密码

function checkRepsw(){

var flag;

var psw=document.getElementsByName("psw")[0].value;

var repsw=document.getElementsByName("repsw")[0].value;

var spanNode=document.getElementById("repswId");

if(psw==repsw){

spanNode.innerHTML="密码一致".fontcolor("green");

flag=true;

}else{

spanNode.innerHTML="密码不一致".fontcolor("red");

flag=false;

}

return flag;

}

function checkMail(){

var reg=new RegExp("^\\w+@\\w+(.\\W+)+$");

return checkinfo("mail","mailId",reg,"格式正确","格式错误");

}

//校验性别

function checkSex(){

var flag;

var sexName=document.getElementsByName("sex");

var spanNode=document.getElementById("sexId");

for(var x=0;x<sexName.length;x++){

if(sexName[x].checked){

spanNode.innerHTML="";

flag=true;

break;

}else{

spanNode.innerHTML="必须选择性别".fontcolor("red");

flag=false;

}

return flag;

}

function checkForm(){

return checkSex()&&checkUser()&&checkPSW()&&checkRepsw()&&checkMail();

}

</script>

用户姓名：<input type="text" name="username" class="inputtext" οnblur="checkUser()"/>

输入密码：<input type="password" name="psw" class="inputtext" οnblur="checkPSW()"/>

确认密码：<input type="password" name="repsw" class="inputtext" οnblur="checkRepsw()"/>

选择性别：<input type="radio" name="sex" value="nan"" />男&nbsp

<input type="radio" name="sex" value="nv" />女

你的邮箱：<input type="text" name="mail" class="inputtext" οnblur="checkMail()">

</form>

</body>