JavaScript_基础练习7
csdh11 2024-12-02 16:38 4 浏览
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结构解析
相关推荐
- ArcGIS干货教程:DEM数字高程模型数据的生成
-
1、概述现在ArcGIS在规划行业的使用逐渐流行起来,多规合一、地理设计、甚至还有大数据、编程设计等等各种高大上无不与ArcGIS多少有点关系,然而大多数行业小伙伴作为一个普通的规划师,只是想用Ar...
- Google推出的首款动态图标字体 如何在设计和开发中使用?
-
Anicons是GoogleDesign和Typogram合作推出的全球第一款彩色图标字体,它是目前最先进的两种字体技术--可变字体和彩色字体的结合的首次实践。Anicons字体自带...
- KWGT : 如果你想随心定制桌面小部件,试试它吧 Android
-
有人说Android在于折腾,而为了让这「机器人」达到美与实用的平衡点,各大定制界面开发者使尽百变招数,花样也层出不穷。其中,KustomWidget(KWGT)就是Android上最精美的...
- 颜色查找表 LUTs及其使用
-
1、什么是LUT?颜色查找表(colorlookuptables,简称LUT)是一个表格,其中包含Photoshop的说明,如何将图像中的原始颜色重新映射到不同的特定颜色,以创建特定的外观,图像...
- 抖音品质建设 - iOS启动优化《原理篇》
-
前言启动是App给用户的第一印象,启动越慢用户流失的概率就越高,良好的启动速度是用户体验不可缺少的一环。启动优化涉及到的知识点非常多面也很广,一篇文章难以包含全部,所以拆分成两部分:原理和实践。本...
- win10:手把手教你怎么打开windows media player
-
通常我们安装好win10系统后,一些网友说他们无法打开WindowsMediaPlayer,也不知道怎么打开它。今天,总裁小编我将教您怎么在win10系统中打开WindowsMediaPl...
- Origami动效制作-入门必看(附3个练习案例)
-
数十万互联网从业者的共同关注!作者:青溪Joanna微信公众号:qingxizhaji(青溪札记)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com网上关于O...
- 30个4GB内存Rackspace云服务器45分钟内可运行1万个Docker容器
-
虽然应用程序的可移植性(即能够在任何一个主机上运行相同的应用程序)仍是采用Linux容器的主要动力,但优化服务器的利用率这另一个关键的优势能够使得你仅占用计算机的很少部分的计算。当然,对于像PROD这...
- 在Photoshop中绘制虚线的多种实用方法总结
-
PS虚线怎么画(HowtoDrawDottedLinesinPhotoshop) 在图形设计中,虚线是一种常见的视觉元素,广泛应用于设计和排版。无论是用于分隔不同的内容,还是作为装饰元...
- 第三章图层、属性设置
-
F本章目标&了解图层的概念和应用&掌握图层的新建、命名、删除、和设置为当前的方法&掌握图层的颜色、线型及线宽设置方法&学会使用图层的开/关、冻结/解冻、锁定/解锁...
- 非常好用的作图软件origin实用问题集锦(4)
-
16.请问在origin中如何设置图片大小?杂志要求图片长5cm,宽4cm,而且对图片中字号、线粗有要求,如果只是在输出时设置图片大小,那图片中字号、线粗不是改变了吗?Answer:在图上的灰色...
- 如意玲珑成熟度再提升,三大发行版支持教程来啦!
-
前期,我们已分别发布如意玲珑在deepinV23与UOSV20、openEuler24.03发行版的操作指南,本文,我们将为大家详细介绍Ubuntu24.04、Debian12、op...
- Windows电脑文件的扩展名(后缀名)有哪些,有什么用?
-
文件扩展名(filenameextension)也称为文件的后缀名,是操作系统用来标记文件类型的一种机制,在Windows系统下,通俗易懂的来说就是扩展名可以告诉操作系统默认用什么软件打开文件。...
- UG NX中英文词汇翻译对照,已整理成文档
-
大家好,我是星辉。虽然UGNX软件可以选择安装中文版本,但是里面依旧会有很多英文词汇,很多新手看到英文就头疼不懂意思。今天我给大家整理好了使用UGNX软件中基本需要明白英文含义的翻译对照文档,有需...
- layui-icon各种常用动态图标
-
<buttonid="btnPrintDetail"class="<br/>layui-btnicon-btn"><iclass="...
- 一周热门
-
-
一文读懂关于MySQL Datetime字段允许插入0000-00-00无效日期
-
MySQL数据库关于表的一系列操作 mysql 表操作
-
新版腾讯QQ更新Windows 9.9.7、Mac 6.9.25、Linux 3.2.5版本
-
IDC机房服务器托管可提供的服务
-
一文看懂mysql时间函数now()、current_timestamp() 和sysdate()
-
一款全能的看图软件,速度快、功能强、免费用
-
深度测评:Pixave 和图片管理之间的距离(二)
-
Boston Dynamics Founder to Attend the 2024 T-EDGE Conference
-
每天一个入坑小技巧:MySql和oracle语法区别(今日追加)
-
Serv-u 提权
-
- 最近发表
- 标签列表
-
- mysql 时间索引 (31)
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- oracle timestamp比较大小 (28)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- 加密与解密第四版pdf (30)
- jemeter官网 (31)
- parsevideo (33)
- 个人网站源码 (37)
- exe4j_java_home (30)
- centos7.4下载 (33)
- xlsx.full.min.js下载 (32)
- 深度学习 pdf (28)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- usb2.0-serial驱动下载 (30)
- vs2010官网 (31)
- python核心编程第四版pdf (32)
- jdk1.8.0_191下载 (33)
- layer icon (32)