JavaScript_基础练习7
csdh11 2024-12-02 16:38 29 浏览
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结构解析
相关推荐
- SpringBoot+LayUI后台管理系统开发脚手架
-
源码获取方式：关注，转发之后私信回复【源码】即可免费获取到！项目简介本项目本着避免重复造轮子的原则，建立一套快速开发JavaWEB项目（springboot-mini），能满足大部分后台管理系统基础开...
- Spring Boot+Vue全栈开发实战，中文版高清PDF资源
-
SpringBoot+Vue全栈开发实战，中文高清PDF资源，需要的可以私我：）SpringBoot致力于简化开发配置并为企业级开发提供一系列非业务性功能，而Vue则采用数据驱动视图的方式将程序...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源，非常适合零基础入门java的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！第一阶段：Java基础...
- 探秘Spring Cache:让Java应用飞起来的秘密武器
-
探秘SpringCache：让Java应用飞起来的秘密武器在当今快节奏的软件开发环境中，性能优化显得尤为重要。SpringCache作为Spring框架的一部分，为我们提供了强大的缓存管理能力，让...
- 3，从零开始搭建SSHM开发框架(集成Spring MVC)
-
目录本专题博客已共享在(这个可能会更新的稍微一些)https://code.csdn.net/yangwei19680827/maven_sshm_blog...
- Spring Boot中如何使用缓存?超简单
-
SpringBoot中的缓存可以减少从数据库重复获取数据或执行昂贵计算的需要，从而显著提高应用程序的性能。SpringBoot提供了与各种缓存提供程序的集成，您可以在应用程序中轻松配置和使用缓...
- 我敢保证，全网没有再比这更详细的Java知识点总结了，送你啊
-
接下来你看到的将是全网最详细的Java知识点总结，全文分为三大部分：Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点，别眨眼，从小白到大佬、零基础到精通，你绝...
- 1，从零开始搭建SSHM开发框架(环境准备)
-
目录本专题博客已共享在https://code.csdn.net/yangwei19680827/maven_sshm_blog1，从零开始搭建SSHM开发框架（环境准备）...
- 做一个适合二次开发的低代码平台，把程序员从curd中解脱出来-1
-
干程序员也有好长时间了，大多数时间都是在做curd。现在想做一个通用的curd平台直接将我们解放出来；把核心放在业务处理中。用过代码生成器，在数据表设计好之后使用它就可以生成需要的controller...
- 设计一个高性能Java Web框架（java做网站的框架）
-
设计一个高性能JavaWeb框架在当今互联网高速发展的时代，构建高性能的JavaWeb框架对于提升用户体验至关重要。本文将从多个角度探讨如何设计这样一个框架，让我们一起进入这段充满挑战和乐趣的旅程...
- 【推荐】强&牛!一款开源免费的功能强大的代码生成器系统!
-
今天，给大家推荐一个代码生成器系统项目，这个项目目前收获了5.3KStar，个人觉得不错，值得拿出来和大家分享下。这是我目前见过最好的代码生成器系统项目。功能完整，代码结构清晰。...
- Java面试题及答案总结(2025版持续更新)
-
大家好，我是Java面试分享最近很多小伙伴在忙着找工作，给大家整理了一份非常全面的Java面试场景题及答案。...
- Java开发网站架构演变过程-从单体应用到微服务架构详解
-
Java开发网站架构演变过程，到目前为止，大致分为5个阶段，分别为单体架构、集群架构、分布式架构、SOA架构和微服务架构。下面玄武老师来给大家详细介绍下这5种架构模式的发展背景、各自优缺点以及涉及到的...
- 本地缓存GuavaCache(一)（guava本地缓存原理）
-
在并发量、吞吐量越来越大的情况下往往是离不开缓存的，使用缓存能减轻数据库的压力，临时存储数据。根据不同的场景选择不同的缓存，分布式缓存有Redis，Memcached、Tair、EVCache、Aer...
- 一周热门
- 最近发表
- 标签列表
-
- 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)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)