JavaScript加强第一讲-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangshuaipeng/article/details/7277261

本文介绍了JavaScript的基础知识，包括函数定义方式、真假值的概念，并详细解析了DOM中不同类型的节点及其属性。通过一个HTML遍历示例展示了如何操作DOM元素、属性及文本节点。

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

概述：开学的第一天，我们开始学习JavaScript加强与Ajax。今天简单总结一下今天的知识，比较简单。

一、JS的函数.

a) 匿名函数

Window.onload=function(){

//当窗体加载完毕后触发的函数

}

b) 普通声明函数

Function test(){}

c) 利用变量声明函数

Var sum=function test1(a,b,c){}

通过sum(a,b,c)调用

二、js中的true和false

a) 关于对象的操作

直接判断对象，当对象不为null的时候为true

b) 关于变量操作

Var d; 这时候d的值为undefined，此时为假。如果赋值则为真

三、DOM中的节点

a) 三种节点的：

节点： nodeName nodeValue nodeType

元素节点：标签名称 null 1

属性节点：属性名属性值 2

文本节点： #text 文本内容 3

b) 简单写了一遍历html根标签的实例，有什么不好的地方请提出来下

<!DOCTYPE html>

<html>

<head>

<title>遍历HTML根标签的子节点</title>

<scripttype="text/javascript">

varprint="";

window.onload=function(){

//document对象

//获取根元素

varhtml=document.documentElement;

//判断当前节点是否有孩子

//是否有属性节点

if(html.nodeType==1){

var number=0;

recursion(html,number);

var bianli=document.getElementById("bianli");

bianli.innerHTML=print;

}

};

function level(number){

var str="";

for(var i=0;i<number;i++){

str+="----";

}

return str;

}

function recursion(node,number){

//首先判断node为元素节点

if(node.nodeType==1){

print+=level(number)+node.nodeName+"<br/>";

//得到所有属性节点

varattrs=node.attributes;

for(var i=0;i<attrs.length;i++){

//得到一个具体的属性节点

varattr=attrs.item(i);

//输出属性节点的名称 value 节点类型

print+=level(number+1)+"属性节点："+attr.nodeName+" 属性类型"+attr.nodeType+" 属性节点值:"+attr.nodeValue+"<br/>";

}

//判断是否有子节点

if(node.hasChildNodes()){

number+=1;

var sonNodes=node.childNodes;

for(var i=0;i<sonNodes.length;i++){

var sonNode=sonNodes.item(i);

//判断是否为元素节点

if(sonNode.nodeType==1){

recursion(sonNode,number);

}else if(sonNode.nodeType==3){

print+=level(number)+"文本节点名称："+sonNode.nodeName+" 文本节点类型"+sonNode.nodeType+" 文本节点值:"+sonNode.nodeValue+"<br/>";

}

}else{

return;

}

}else{

return;

}

function test2(){

var divDom=document.getElementById("two");

//alert("当前节点的名称"+divDom.nodeName+" 节点的类型"+divDom.nodeType+" 节点value值："+divDom.nodeValue);

//判断当前节点是否是元素节点

//判断当前节点是否有子节点

if(divDom.hasChildNodes()){

var sonNodes=divDom.childNodes;

for(var i=0;i<sonNodes.length;i++){

var sonNode=sonNodes.item(i);

alert("当前节点的名称"+sonNode.nodeName+" 节点的类型"+sonNode.nodeType+" 节点value值："+sonNode.nodeValue);

}

alert("节点的大小是："+sonNodes.length);

}

//直接获取当前节点的孩子节点的第一个节点

if(divDom.hasChildNodes()){

var firstNode=divDom.firstChild;

//节点类型文本节点类型

alert("文本节点类型的名称："+firstNode.nodeName+"文本节点的value值："+firstNode.nodeValue+"文本节点类型的类型"+firstNode.nodeType);

}

function test1(){

var inputDom=document.getElementById("uname");

alert("type属性值为："+inputDom.type+" value属性值："+inputDom.value+" id属性值："+inputDom.id);

//节点属性

//元素节点名称标签名称input value值为null type 为 1为元素节点

alert("当前节点的名称"+inputDom.nodeName+" 节点的类型"+inputDom.nodeType+" 节点value值："+inputDom.nodeValue);

//首先判断该节点是否是元素节点

if(inputDom.nodeType==1){

//attributes来获取该元素节点的所有属性

varattrs=inputDom.attributes;

//遍历属性节点

for(var i=0;i<attrs.length;i++){

//得到一个具体的属性节点

varattr=attrs.item(i);

//输出属性节点的名称 value 节点类型

alert("属性节点："+attr.nodeName+" 属性类型"+attr.nodeType+" 属性节点的value:"+attr.nodeValue);

}

alert(attrs.length);

}

</script>

</head>

<body>

用户名：<input type="text"value="请输入用户名" id="uname">

</div>

<div id="two">marico</div>

</body>

</html>

效果如下：