js操作文档对象的节点

时间:2022-03-09 10:32:56

好吧,为了能让大家不至于睡着,我们先回顾先前面的东东吧~

1.首先我们写了javaScriput的是一门弱类型的解释性的脚本语言:弱类型:我们的变量不用申明其具体的数据类型,在使用的时候浏览器根据其存放的值来自动识别

解释性:js是不用编译的,是在浏览器中边运行边解析的

                                 脚本语言:js是在客户端的浏览器中运行的

2.变量:我们的开房案例,说明了变量是一个存储变量值的内存地址名称

3.数据类型:基本数据类型:

数值型、字符串性、布尔型、null、undefined

      复杂类型:

         数组、对象、函数

4.运算符和表达式:

            算数运算符、赋值运算符、逻辑运算符、位运算符

5.流程控制语句:

            判断分支语句:

        if...else...类型

        switch .... case...类型

循环语句:

                   for类型

        while以及dowhile类型

以上就是我们的无聊的基础部分:

一下我们就开始学习稍微有趣点的部分及 js操作文档对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript操作DOM节点</title>
<script type="text/javascript">
function modifyDOM(){
document.getElementById("txt").innerHTML="用户名:";
document.getElementById("userName").value="Jack";
}

function addDOM(){//添加节点
var para=document.createElement("p");//创建节点p
var node=document.createTextNode("...前...");//创建文本节点
var para2=document.createElement("p");//创建节点p
var node2=document.createTextNode("...后...");//创建文本节点
para.appendChild(node);//把第一个文本节点添加到第一个p元素中
para2.appendChild(node2);//吧第二个文本节点添加到第二个p元素中
var parent=document.getElementById("parent");//得到id为parent的元素及我们最大的div
var son1=document.getElementById("son1");//得到id为son1的节点
parent.insertBefore(para, son1);//在id为son1之前插入创建的p元素
parent.appendChild(para2);//在id为son1的元素之后插入创建的第二个p元素
}

function removeDOM(){//删除id
var parent=document.getElementById("parent");//得到需要删除元素的父元素
var son1=document.getElementById("son1");//得到需要删除的元素
parent.removeChild(son1);//删除操作
}
</script>
</head>
<body>
<div id="parent">
<div id="son1">
<font id="txt">:</font><input type="text" id="userName" name="userName"/>
</div>
</div>
<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>
<input type="button" value="添加DOM节点" onclick="addDOM()"/>
<input type="button" value="删除DOM节点" onclick="removeDOM()"/>
</body>
</html>