JavaScript_基础练习7
csdh11 2024-12-02 16:38 21 浏览
1. JavaScript HTML DOM
HTML-----html标记
JavaScript -----javascript对象/变量
我们现在需要通过JavaScript来改变html标记所呈现的样子/样式/位置等等。那么这是我们就需要将html标记转换成javascript对象
将html标记转换成javascript对象----HTML DOM对象
DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
JavaScript - HTML DOM 方法
HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
下面的例子改变了 id=“demo” 的
元素的内容：
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
getElementById 方法
getElementById 方法使用 id=“demo” 来查找元素。
innerHTML 属性
//1.得到元素的内容
//var val=document.getElementById(“demo”).innerHTML;
//alert(val);
//2.改变元素的内容
document.getElementById(“demo”).innerHTML=“hello,网星”;
HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
查找 HTML 元素
方法描述document.getElementById(id)通过元素 id 来查找元素document.getElementsByTagName(name)通过标签名来查找元素document.getElementsByClassName(name)通过类名【class】来查找元素
1.document.getElementById(id) 通过 id 查找 HTML 元素
如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。
如果未找到元素，myElement 将包含 null。
当有 HTML 元素的id相同的时候，只能得到一个。
- document.getElementsByTagName(name) 通过标签名查找 HTML 元素
var p=document.getElementsByTagName(“p”);
var temp=1;
for(var i=0;i<p.length;i++){
p[i].innerHTML=“第”+temp+“p元素”;
temp++;
}
名称相同的元素组成一个数组。
3.document.getElementsByClassName(name) 通过类名查找 HTML 元素
var class_p=document.getElementsByClassName(“p2”);
for(var i=0;i<class_p.length;i++){
class_p[i].style.color = “blue”;
}
class属性值相同的元素组成一个数组。
改变 HTML 元素
方法描述element.innerHTML = new html content改变元素的 inner HTMLelement.attribute = new value改变 HTML 元素的属性值element.setAttribute(attribute, value)改变 HTML 元素的属性值element.style.property = new style改变 HTML 元素的样式
- innerHTML 得到/改变元素的文本
- attribute 改变 HTML 元素的属性值
element.attribute = new value 这个语法规则中attribute 使用具体的html元素的属性名称来代替
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addBoder(){
var tableObject=document.getElementById("mainTable");
tableObject.border="1px";
}
function addwidth(){
var tableObject=document.getElementById("mainTable");
tableObject.width="400px";
}
function addbgcolor(){
var tableObject=document.getElementById("mainTable");
tableObject.bgColor="red";
}
function addtrbgcolor(){
var trObject=document.getElementsByTagName("tr");
for(var i=0;i<trObject.length;i++){
if(i%2!=0){
trObject[i].bgColor="blue";
}
}
}
</script>
</head>
<body>
<input type="button" value="设置表格的边框" onclick="addBoder();"/>
<input type="button" value="设置表格的宽度" onclick="addwidth();"/>
<input type="button" value="设置表格的隔行变色" onclick="addtrbgcolor();"/>
<input type="button" value="设置表格的背景色" onclick="addbgcolor();"/>
<table id="mainTable" >
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
</table>
</body>
</html>
得到指定的html元素的对应的属性值
function getborder(){
var tableObject=document.getElementById(“mainTable”);
alert(tableObject.border);
}
3. setAttribute(attribute, value)改变 HTML 元素的属性值
attribute—html元素的属性名称
value-------html元素的属性名称的取值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addBoder(){
var tableObject=document.getElementById("mainTable");
tableObject.setAttribute("border","1px");
}
function addwidth(){
var tableObject=document.getElementById("mainTable");
tableObject.setAttribute("width","400px");
}
function addbgcolor(){
var tableObject=document.getElementById("mainTable");
tableObject.setAttribute("bgcolor","red");
}
function addtrbgcolor(){
var trObject=document.getElementsByTagName("tr");
for(var i=0;i<trObject.length;i++){
if(i%2!=0){
trObject[i].setAttribute("bgcolor","blue")="blue";
}
}
}
</script>
</head>
<body>
<input type="button" value="设置表格的边框" onclick="addBoder();"/>
<input type="button" value="设置表格的宽度" onclick="addwidth();"/>
<input type="button" value="设置表格的隔行变色" onclick="addtrbgcolor();"/>
<input type="button" value="设置表格的背景色" onclick="addbgcolor();"/>
<table id="mainTable" >
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
</table>
</body>
</html>
4. element.style.property = new style 得到/设置html元素对应CSS样式的属性值。
html元素的属性值----出现在html开始标记中的属性设置
CSS样式的属性值----给html设置的css样式中的属性。
html元素的属性值–src
css样式中的属属性值–src[错误]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<style>
#div{
width:200px;
height:200px;
background-color: black;
}
</style>
-->
<script>
function testStyleAttr(){
var divObject=document.getElementById("div");
var wid=divObject.style.width;
var hei=divObject.style.height;
var mycolor=divObject.style.backgroundColor;
alert(wid+","+hei+","+mycolor);
divObject.style.width="400px";
divObject.style.height="400px";
divObject.style.backgroundColor="red";
}
</script>
</head>
<body>
<input type="button" value="测试修改样式属性" onclick="testStyleAttr();" />
<div id="div"
style="width:200px;height:200px;background-color: black;">
</div>
<!--
<div id="div"></div>
-->
</body>
</html>
添加和删除元素
方法描述document.createElement(element)创建 HTML 元素document.removeChild(element)删除 HTML 元素document.appendChild(element)添加 HTML 元素document.replaceChild(element)替换 HTML 元素document.write(text)写入 HTML 输出流createTextNode(text)创建文本元素
添加和删除节点（HTML 元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
function testElement(){
var pobj=document.createElement("p");
alert(pobj);
}
*/
window.onload=function(){
document.getElementById("but").onclick=function(){
/*
//createElement(element)创建 HTML 元素
var pobj=document.createElement("p");
//createTextNode(text)创建文本元素
var node=document.createTextNode("测试添加p元素的文本值");
//将文本元素添加到HTML 元素中
pobj.appendChild(node);
//根据id得到div对象
var divobj = document.getElementById("div1");
divobj.appendChild(pobj);
*/
/*错误
var pobj=document.createElement("<p>测试添加p元素的文本值</p>");
//根据id得到div对象
var divobj = document.getElementById("div1");
divobj.appendChild(pobj);
*/
/*
//document.removeChild(element) 删除 HTML 元素
var p1 = document.getElementById("p1");
var divobj = document.getElementById("div1");
divobj.removeChild(p1);
*/
/*
//document.replaceChild(新元素，旧元素) 替换 HTML 元素
var pobj=document.createElement("p");
var node=document.createTextNode("测试添加p元素的文本值");
pobj.appendChild(node);
var p1 = document.getElementById("p1");
var divobj = document.getElementById("div1");
divobj.replaceChild(pobj,p1);
*/
document.write("<h1>测试写出一个html元素</h1>")
};
}
</script>
</head>
<body >
<!--<input type="button" value="测试元素的添加" onclick="testElement();"/><br>-->
<input id="but" type="button" value="测试元素的添加"/><br>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
</body>
</html>
添加事件处理程序
方法描述document.getElementById(id).onclick = function(){code}向 onclick 事件添加事件处理程序
window.onload=function(){
document.getElementById(“but”).onclick=function(){
alert(“按钮的点击事件”);
};
}
- 上一篇：详解Document对象
- 下一篇：Net开发Word系列之word结构解析
相关推荐
- 探索Java项目中日志系统最佳实践:从入门到精通
-
探索Java项目中日志系统最佳实践：从入门到精通在现代软件开发中，日志系统如同一位默默无闻却至关重要的管家，它记录了程序运行中的各种事件，为我们排查问题、监控性能和优化系统提供了宝贵的依据。在Java...
- 用了这么多年的java日志框架，你真的弄懂了吗?
-
在项目开发过程中，有一个必不可少的环节就是记录日志，相信只要是个程序员都用过，可是咱们自问下，用了这么多年的日志框架，你确定自己真弄懂了日志框架的来龙去脉嘛？下面笔者就详细聊聊java中常用日志框架的...
- 物理老师教你学Java语言(中篇)（物理专业学编程）
-
第四章物质的基本结构——类与对象...
- 一文搞定!Spring Boot3 定时任务操作全攻略
-
各位互联网大厂的后端开发小伙伴们，在使用SpringBoot3开发项目时，你是否遇到过定时任务实现的难题呢？比如任务调度时间不准确，代码报错却找不到方向，是不是特别头疼？如今，随着互联网业务规模...
- 你还不懂java的日志系统吗 ?（java的日志类）
-
一、背景在java的开发中，使用最多也绕不过去的一个话题就是日志，在程序中除了业务代码外，使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”，没错在日常的开发、调试过程中打印日志是常干...
- 谈谈枚举的新用法--java（java枚举的作用与好处）
-
问题的由来前段时间改游戏buff功能，干了一件愚蠢的事情，那就是把枚举和运算集合在一起，然后运行一段时间后buff就出现各种问题，我当时懵逼了！事情是这样的，做过游戏的都知道，buff，需要分类型，且...
- 你还不懂java的日志系统吗（javaw 日志）
-
一、背景在java的开发中，使用最多也绕不过去的一个话题就是日志，在程序中除了业务代码外，使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”，没错在日常的开发、调试过程中打印日志是常干...
- Java 8之后的那些新特性(三):Java System Logger
-
去年12月份log4j日志框架的一个漏洞，给Java整个行业造成了非常大的影响。这个事情也顺带把log4j这个日志框架推到了争议的最前线。在Java领域，log4j可能相对比较流行。而在log4j之外...
- Java开发中的日志管理:让程序“开口说话”
-
Java开发中的日志管理：让程序“开口说话”日志是程序员的朋友，也是程序的“嘴巴”。它能让程序在运行过程中“开口说话”，告诉我们它的状态、行为以及遇到的问题。在Java开发中，良好的日志管理不仅能帮助...
- OS X 效率启动器 Alfred 详解与使用技巧
-
问：为什么要在Mac上使用效率启动器类应用？答：在非特殊专业用户的环境下，（每天）用户一般可以在系统中进行上百次操作，可以是点击，也可以是拖拽，但这些只是过程，而我们的真正目的是想获得结果，也就是...
- Java中 高级的异常处理（java中异常处理的两种方式）
-
介绍异常处理是软件开发的一个关键方面，尤其是在Java中，这种语言以其稳健性和平台独立性而闻名。正确的异常处理不仅可以防止应用程序崩溃，还有助于调试并向用户提供有意义的反馈。...
- 【性能调优】全方位教你定位慢SQL，方法介绍下!
-
1.使用数据库自带工具...
- 全面了解mysql锁机制(InnoDB)与问题排查
-
MySQL/InnoDB的加锁，一直是一个常见的话题。例如，数据库如果有高并发请求，如何保证数据完整性？产生死锁问题如何排查并解决？下面是不同锁等级的区别表级锁：开销小，加锁快；不会出现死锁；锁定粒度...
- 看懂这篇文章，你就懂了数据库死锁产生的场景和解决方法
-
一、什么是死锁加锁（Locking）是数据库在并发访问时保证数据一致性和完整性的主要机制。任何事务都需要获得相应对象上的锁才能访问数据，读取数据的事务通常只需要获得读锁（共享锁），修改数据的事务需要获...
- 一周热门
- 最近发表
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 反恐24小时电话铃声 (33)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)