JavaScript_基础练习7

最新推荐文章于 2022-07-19 19:44:57 发布
最新推荐文章于 2022-07-19 19:44:57 发布
阅读量125 收藏
点赞数
分类专栏： JavaScript 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zhiyi/article/details/108482003
版权

https://www.w3school.com.cn/js/index.asp

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相同的时候，只能得到一个。

  1. 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 HTML
element.attribute = new value改变 HTML 元素的属性值
element.setAttribute(attribute, value)改变 HTML 元素的属性值
element.style.property = new style改变 HTML 元素的样式
  1. innerHTML 得到/改变元素的文本
  2. 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.οnlοad=function(){
document.getElementById(“but”).οnclick=function(){
alert(“按钮的点击事件”);
};
}

H之一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数组2
weixin_33709364的博客
06-19 97
1. ***数组: API: 拼接和选取 修改 翻转****排序: 自定义排序算法: 冒泡排序 sort()1. 拼接和选取: 拼接: 将其它元素或其它数组拼接到当前数组末尾,返回新数组 var newArr=arr1.concat(值1,值2,arr2,......) 强调: 1. 无权修改...
Javascript基础测试
weixin_58178689的博客
06-03 203
JavaScript基础知识
JavaScript基础测试
Lang_Y的博客
11-23 199
一、基础知识填空 1、 写出JS中的数据类型都有哪些： 基本数据类型：number null undefinded string Boolean 引用数据类型： 函数：function Object: 对象 {} 数组 [] 正则 (/\d/) Math Date 基于es6引入的symbol：唯一数据类型 2、数据类型检测的方法： typeof instanceof constructor Object.prototype.toString.call() 3、简要描述基本数
JS基础测试（上）
最新发布
qq_48962360的博客
07-19 568
js基础测试，面经
测试大牛必会的前端--javascript基础知识
XXLoveSHT的博客
08-02 1274
  文档对象模型 dom 就是一个html dom 把 html 划分成了一个树结构 dom能够操作分支，改变样式改变内容   dom是有分支的 document 是具体的对象，是dom的一种实现方式，可以通过doucument 节点可以遍历文档里的所有子节点 document 能够操作页面上的元素 dom 可以看成是一个页面     &lt;!DOCTYPE...
JavaScript基础练习_day7
09-06
该题目是关于JavaScript的基础练习题，适用于刚入门前端的新手。着重基础概念的挖掘，会不断更新。
JavaScript基础练习_day4
08-27
该题目是关于JavaScript的基础练习题，适用于刚入门前端的新手。着重基础概念的挖掘，会不断更新。
JavaScript基础练习_day2
08-23
该题目是关于JavaScript的基础练习题，适用于刚入门前端的新手。着重基础概念的挖掘，会不断更新。
JavaScript基础练习_day8
10-12
该题目是关于JavaScript的基础练习题，适用于刚入门前端的新手。着重基础概念的挖掘，会不断更新。
JavaScript基础练习_day6
08-31
该题目是关于JavaScript的基础练习题，适用于刚入门前端的新手。着重基础概念的挖掘，会不断更新。
js 基础测试题
weixin_30367543的博客
01-25 1413
智能社javascript基础题测试姓名：________目前学过的获取元素的方式有哪些？并说出是通过什么获取的？获取出来几个？Answer:Document.getElementById();获取一个；Document.getELementsByTagName()//获取多个；Document.getELementsByClassName();//获取多个；简单写出一个div层垂直水平居中的代码...
JS基础7/17
weixin_47067248的博客
07-17 154
JS输出框类型5种 alert(‘你好’); （只有确定一个按钮的警示框） prompt（‘请输入您的姓名’）; confirm(‘确认提交信息吗？’); （有确定和取消两个按钮） console.log(’’); (控制台打印) document.write(’’); (在页面输出信息） 转义字符 \” 转双引 \’转单引 \n转换行 \r 转回车 基本数据类型5种 number/string/boolean/null/undefined ES6新增 sy
JavaScript7
zhang_zchao的专栏
11-05 358
 /** * 校验邮政编码 * @param postCode 要检验的数据 */function checkPostalCode(postCode){    if (!checkstring_allSpace(postCode))      return false;         var postCode = trim(postCode);        if (postCode.lengt
JS-7-new
yan5136970的专栏
07-10 222
function p(){ this.name = "111" } var o = {}; p.call(o); o.name;//111 o.p()     o.name="111" function Persion(name,age){ this.name = name; this.age = age; } 模仿实现new方法 var p1 = new P
Javascript基础 86个面试题汇总 (附答案)
热门推荐
数据知道的博客
02-24 5万+
1.JavaScript是一门什么样的语言，它有哪些特点？（没有标准答案） 参考答案： JavaScript是一门强大的编程语言，是一种专为与网页交互而设计的脚本语言，是一种动态类型、弱类型、基于原型的语言。 JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。 特点： 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行
javascript基础（输出测试语句的三种方式）（一）
余正源的博客
02-07 2万+
1.测试常用的三种输出方式： /* * 控制浏览器弹出一个提示框 */ alert("Hello JavaScript"); /* * 控制浏览器在页面中输出一个内容 * document.write()向body中写一个内容 */ document.write("看我出来不？？
JavaScript基础测试题
qq_43753895的博客
08-04 1万+
JavaScript 基础阶段测试题 JavaScript 基础阶段测试题，试试你能得多少分？ 一、选择题（每题2分，多选题错选、少选不得分） 1、分析下段代码输出结果是（ ） var arr = [2,3,4,5,6]; var sum =0; for(var i=1;i < arr.length;i++) { sum +=arr[i] } console.log(sum); A．20 B．18 C．14 D．12 ...
2020-09-17
weixin_50394831的博客
09-17 108
JavaScript之元素的动态增加与删除 1 .DOM概念 2 .修改元素 3. 添加删除元素 1 .DOM概念 DOM（Document Object Model）:文档对象模型 通过开发者工具可以看到 整个文档是由一系列的节点对象组成的一棵树 节点（Node）包括元素节点 （1）、属性节点 （2）、和文本节点 （3）Th1代表一个元素节点（nodeType=1），nodeName是标签名（th）元素节点的nodeValue=null （1）getAttributeNode方法是获取元素的属性节点，
javascript基础练习
weixin_44440403的博客
01-07 743
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script type="text/javascript"&
JAVASCRIPT习题带答案.docx
07-09
JAVASCRIPT习题带答案.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值