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

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>

js操作文档对象的节点的更多相关文章

  1. js之文档对象的设置（DOM）

    1.对象文本: 对象.innerHTML;   对象.innerHTML=""; 对象.innerText; 对象.innerText=""; 2.对象属性: ...

  2. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  3. 数组对象元素的添加，String对象，BOM对象以及文档对象的获取

    数组对象的删除有三种方法: pop();        //移除最后一个元素并返回该元素值shift();      //移除最前一个元素并返回该元素值,数组中元素自动前移splice(0,2); / ...

  4. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

  5. DOM文档对象总结

    DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...

  6. 第一百一十四节，JavaScript文档对象，DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  7. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  8. 文档对象类型DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...

  9. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

随机推荐

  1. 【248】◀▶IEW-Unit13

    Unit 13 Technology 流程图讲解 1.model1对应图片讲解 2.Model1范文分析 Model 1 The ice cream making process has five k ...

  2. excel批量提取网页标题

    最近时间比较忙,有时候很多网页需要临时保存,以便空闲的时候查看.单纯的保存网页链接会让人很枯燥,所以需要自动批量提取标题. 为了这个小功能去写个小程序有点不划算,所以就利用excel实现了这个功能. ...

  3. 9. 那些强悍的PHP一句话后门

    强悍的PHP一句话后门 这类后门让网站.服务器管理员很是头疼,经常要换着方法进行各种检测,而很多新出现的编写技术,用普通的检测方法是没法发现并处理的.今天我们细数一些有意思的PHP一句话木马. 利用4 ...

  4. Linux 错误集锦

    1. CentOS 7 运行yum时出现/var/run/yum.pid已被锁定,PID为xxxx的另一个程序正在运行的问题解决 解决办法: rm -f /var/run/yum.pid,删除文件后再 ...

  5. Spring Data JPA stackoverflow

    1.禁止使用lombok 的@Data 注释 使用@Data注释后,默认会重写父类的toString()方法,hashcode()等方法,在往map里存的时候,会根据equals和hashcode方法 ...

  6. SmartSql使用教程（2）——使用动态代理实现CURD

    一.引言 接着上一篇的教程,本章我们继续讲SmartSql.今天的主题是动态仓储. 老规矩,先上一个项目结构 从第二章开始.我们将原来的单一项目做了一个分离.方便之后的更新. 在这个结构中.原本上一章 ...

  7. 《机器学习实战》-k近邻算法

    目录 K-近邻算法 k-近邻算法概述 解析和导入数据 使用 Python 导入数据 实施 kNN 分类算法 测试分类器 使用 k-近邻算法改进约会网站的配对效果 收集数据 准备数据:使用 Python ...

  8. vue element-ui IE9--11报 “无法获取未定义或null引用的属性‘toLowerCase’”

    今天做zymh比赛的一个管理后台,用的技术是vue+element-ui+vue-router+axios,其他浏览器运行的很好,但是在IE(从IE11到IE9,vue支持IE9以上)都报错 点进去就 ...

  9. js new Date("2016-07-01 08:00:00") 格式在IE内核浏览器中显示NaN的问题

    js new Date("2016-07-01 08:00:00") 格式在IE内核浏览器中显示NaN的问题 废话就不多了,var dd = new Date("2016 ...

  10. STP-12-MST工作原理

    MST将网络划分为一或多个区域.一个MST区域是一组以相同方式共同使用MST的交换机——除了其他特性外,它们运行相同数量的MST实例,并在这些实例上映射相同的VLAN集合. 例如,在下图中,工程师定义 ...