js 第二篇 （DOM 操作）
DOM 节点含有：元素节点，属性节点，文本节点。
document.getElementById("id") //通过页面元素ID 值 捕获元素对象，得到的值为一个object
1. innerHTML：
//作用有两个：1. 实例化object 值；2. 修改元素内容（给object 对象重新赋值），以下实例详细说明其两点作用：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript good</p
<script type="text/javascript">
var mychar= document.getElementById("con"); //捕获id 对象
document.write("原标题:"+mychar+"<br>"); //输出一个非null 的对象，此时没有真实内容
documet.write("原标题:" + mychar.innerHTML);输出获取到对象的内容，实例化对象
mychar.innerHTML = "替换后的内容是这样的";
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>
2. 修改对象样式：
var mychar= document.getElementById("con"); //捕获id 对象
mychar.style.cssText="fontsize:20px;color:red;background:blue"; //修改对象样式
3. 显示和隐藏(display 属性,value = none or block):
<script type="text/javascript">
function hidetext(){
document.getElementById("con").style.display = "none";
}
function showtext(){
document.getElementById("con").style.display = "block";
}
</script>
<p id="con">点击按钮实现隐藏和显示功能</p>
<form>
<input type="butoon" onclick="hidetext()" value="隐藏" />
<input type="butoon" onclick="showtext()" value="显示" />
</form>
4. 控制类名(className 属性):
<style>
.one {
background-color:write;
}
.two{
background-color: blue;
}
</style>
<script>
function addone(){
document.getElementById("p1").className = "one";
}
function addtwo(){
document.getElementById("p2").className = "two";
}
</script>
<p id="p1">the one!</p>
<p id="p2">the two!</p>
<input type="butoon" value="改变样式" onclick="addone()" />
<input type="butoon" value="改变样式" onclick="addtwo()" />
5. 恢复所有修改内容(removeAttribute("style")):
document.getElementById("id").removeAttribute("style");
#综合实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick="changecolor()"/>
<input type="button" value="改变宽高" onclick="changewh()" />
<input type="button" value="隐藏内容" onclick="hidecontent()"/>
<input type="button" value="显示内容" onclick="showcontent()"/>
<input type="button" value="取消设置" onclick="cancle()"/>
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
function changecolor(){
document.getElementById("con").style.cssText="color:blue";
} //定义"改变宽高"的函数
function changewh(){
document.getElementById("con").style.cssText="width: 200px;height:500px";
} //定义"隐藏内容"的函数
function hidecontent(){
document.getElementById("txt").style.display="none";
} //定义"显示内容"的函数
function showcontent(){
document.getElementById("txt").style.display="block";
}
//定义"取消设置"的函数
function cancle(){
document.getElementById("con").removeAttribute("style");
document.getElementById("txt").removeAttribute("style");
}
</script>
</body>
</html>
js 第二篇 （DOM 操作）的更多相关文章
- js基础篇(dom操作，字符串，this等)
首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- jquer 基础篇 dom操作
DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...
- js练习【DOM操作】
完成效果: 演示地址:http://codepen.io/anon/pen/jPbYWq HTML: <!DOCTYPE html> <html lang="en" ...
- [笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
- 【2017-03-28】JS基础、DOM操作
一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
- ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...
随机推荐
- JavaScript效果下载网站！
原文发布时间为:2009-07-16 -- 来源于本人的百度文章 [由搬家工具导入] http://myjs.chinaz.com/
- 阿里巴巴Java开发手册公开版(转)
1.不要嫌名字长 无论是方法,变量,还是函数的取名,不要嫌弃名称太长,只要能够表示清楚含义就可以了. 2.String[] args而不是String args[] 中括号是数组类型的一部分,数组定义 ...
- poj 2699 The Maximum Number of Strong Kings 枚举 最大流
题目链接 题意 对于一个竞赛图(有向完全图),其顶点是选手,边是比赛,边\(e=(u,v)\)代表该场比赛中\(u\)战胜\(v\). 现定义选手的分数为其战胜的人的个数(即竞赛图中点的出度).并且定 ...
- 转 C++拷贝构造函数详解
C++拷贝构造函数详解 一. 什么是拷贝构造函数 首先对于普通类型的对象来说,它们之间的复制是很简单的,例如: int a = 100; int b = a; 而类对象与普通对象不同,类对象内部结构一 ...
- VIM 的 modeline 和 autocmd
modeline vim的modeline可以让你针对每个文件进行文件级别的设置,这些设置是覆盖当前用户的vimrc中的设置的.当vim打开一个包含了vim modeline注释行的文件时,会自动读取 ...
- CentOS 7系统添加启动项
CentOS 7系统已经把CentOS 6的 runlevel 系统服务管理替换成了systemd.在 /etc/rc[0-6S].d 下添加启动项已经不能在系统启动的时候自动执行,需要通过新的 sy ...
- postgresql 10 数据类型 (完整版)
官方数据类型document https://www.postgresql.org/docs/10/static/datatype.html PostgreSQL拥有丰富的数据类型供用户使用.用户也可 ...
- ios textfield如何设置，只能输入1.0-9.9内的数字，并实现时时监测效果
//byzqk- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range repla ...
- (2)Django-pycharm部署
pycharm 1.新建一个Django工程 2.部署 在pycharm下方的terminal终端中输入命令: python manage.py startapp app1 生成“app1”文件夹 3 ...
- 使用企业微信的API给指定用户发送消息
上个月比较忙,等不忙了继续写点基础教程(五一还在高铁上写项目在).因为公司的原因,自己学习了点JavaWeb的知识,重新写了一个简单的后台管理,用于记录用户注册信息的.其中有这样的一个要求,就是在用户 ...