js操作文档对象的节点
好吧,为了能让大家不至于睡着,我们先回顾先前面的东东吧~
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操作文档对象的节点的更多相关文章
- js之文档对象的设置(DOM)
1.对象文本: 对象.innerHTML; 对象.innerHTML=""; 对象.innerText; 对象.innerText=""; 2.对象属性: ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 数组对象元素的添加,String对象,BOM对象以及文档对象的获取
数组对象的删除有三种方法: pop(); //移除最后一个元素并返回该元素值shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移splice(0,2); / ...
- 前端开发—BOM对象DOM文档对象操作
BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...
- DOM文档对象总结
DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...
- 第一百一十四节,JavaScript文档对象,DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- 文档对象类型DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- 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操作盒 ...
随机推荐
- Windows下caffe安装详解(仅CPU)
本文大多转载自 http://blog.csdn.net/guoyk1990/article/details/52909864,加入部分自己实战心得. 1.环境:windows 7\VS2013 2. ...
- pysam操作sam文件
pysam模块 因为要分析sam文件中序列的情况,因此要对reads进行细分,所以之前想用数据库将sam文件信息存储,然后用sql语句进行分类.后来发现很麻烦,pysam就是一个高效读取存储在SAM ...
- CodeForces - 633D Fibonacci-ish 大数标记map+pair的使用
Fibonacci-ish Yash has recently learnt about the Fibonacci sequence and is very excited about it. He ...
- Zookeeper发布订阅之SpringBoot+Mybatis多数据源
1.前言 数据发布/订阅系统,即所谓的配置中心,顾名思义就是发布者将数据发布到Zookeeper的一个或一系列节点上,供订阅者进行数据订阅,进而达到动态获取数据的目的,实现配置信息的集中管理和数据的动 ...
- 数据库路由中间件MyCat - 源代码篇(13)
此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 4.配置模块 4.2 schema.xml 接上一篇,接下来载入每个schema的配置(也就是每个MyCat ...
- 51nod1287(二分/线段树区间最值&单点更新)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1287 题意:中文题诶- 解法1:b[i] 存储 max(a[0 ...
- 2017-9-12 NOIP模拟赛[hkd]
NOIP 2017 全假模拟冲刺 T1 Spfa 题目描述B 国在耗资百亿元之后终于研究出了新式武器——连环阵(Zenith ProtectedLinked Hybrid Zone).传说中,连环阵是 ...
- uoj#386. 【UNR #3】鸽子固定器(乱搞)
传送门 题解 //minamoto #include<bits/stdc++.h> #define R register #define ll long long #define fp(i ...
- Node.js 内置模块fs的readdir方法 查看某个文件夹里面包含的文件内容
fs.readdir(path[, options], callback) 例: "use strict"; const fs = require("fs"); ...
- vue+element级联选择器对接后台数据
1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/** * @Auther: GGDong * @Date: 2019/4/3 10:30 */@Get ...