JavaScript7

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

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

1.JavaScriptHTML DOM

HTML--html标记

JavaScript---JavaScript对象/变量

我们现在需要通过JavaScript来改变html来改变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事件

通过HTMLDOM，Javascript能够访问和改变HTML文档的所有元素。

JavaScript-HTML-DOM方法

HTML-DOM方法是能够（在HTML元素上）执行的动作。

HTML-DOM属性是能够设置或改变的HTML元素的值。

下面的例子改变了Id="demo"的<p>元素的内容：

<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

getElementbyld方法

getElementbyld方法使用id=demo来查找元素。

innerHTML 属性

//1.得到元素的内容

//var var=document.getElementById（"demo").innerHTML;

//alert(val);

//2.改变元素的内容

document.getElementByld("demo").innerHTML="hello“；

HTML.DOM.Document对象

文档对象代表你的网页

如果你希望访问HTML页面中的任何元素，那么访问就是从document对象开始的

查找HTML元素

方法

描述

document.getElementById(id)

通过元素 id 来查找元素

document.getElementsByTagName(name)

通过标签名来查找元素

document.getElementsByClassName(name)

通过类名【class】来查找元素

1.document.getElementByld(id)  通过id查找HTML元素

如果元素被找到，此方法会以对象返回该元素（在myElement中）。

如果未找到元素，myElement将包含null.

当有HTML元素的id相同的时候，只能得到一个。

<script>

            window.οnlοad=function(){

                           document.getElementByld("p1).innerHTML=”hello";

                                }

</script>

2.  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.getElementByClassName(name).通过类名查找HTML元素

var class_p=document.getElementByClassName("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得到/改变元素文本

	<script>
		window.onload=function(){
			var parray=document.getElementsByTagName("p");
			var temp=1;
			for(var i=0;i<parray.length;i++){
				parray[i].innerHTML="第"+temp+"p元素";
				temp++;
			}
			alert(parray[3].innerHTML);
			}
		</script>

          

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.getElementByld("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");
					}
				}
			}
		</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样式中的属性。

<img/>

html元素的属性值---出现在html开始标记中的属性。

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("按钮的点击事件");
		   };
		  }

 

270年前
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript基础7
weixin_52188375的博客
11-20 136
JavaScript_7 1.常用的javascript的内置对象 1.字符串对象（String） 2.Number 对象 3.JavaScript Array（数组） 4.JavaScript Boolean（布尔)【注意Boolean对象与boolean值的差异】 5.JavaScript Date（日期） 6.JavaScript Math（算数） 7.JavaScript RegExp 对象 RegExp：是正则表达式（regular expre...
JavaScript基础知识点总结、八
weixin_52192654的博客
11-21 149
JavaScript基础知识点总结、八 一、DOM对象 DOM--Document Object Model[文档对象模型] 当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM模型被构造为对象的树 Html文件 <html> <head> <title>My title</title> </head> <body> <a href=””...
JS基础测试（上）
qq_48962360的博客
07-19 570
js基础测试，面经
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("看我出来不？？
Java二阶段 jquery
m0_45196258的博客
09-10 202
jquery 导入jquery: <script src="js/jquery-3.4.1.js"></script> 操作是批量操作 不需要循环操作 $("") $("#id") $(".class") $("element"):element是标签 基本选择器 :first :last 示例： $('li:first'); :odd :even 奇数 偶数 :gt(index) :lt(index) 索引值 从0开始 :eq(index) 内容： :contains
js基础练习（四）
flqbestboy的专栏
08-10 6665
练习： 通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数，然后输出该数组的左下半三角。试编程。 1   2   3   4   5 6   7   8   9   10 11 12 13 14  15 16 17 18 19  20 21 22 23 24  25 var arr=[]; for(var i=0;i<5;i++){
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
JavaScript-Completions.7z
04-08
new plugin offers not only a BETTER AUTOCOMPLETE but a lot of features about creating, developing and managing JavaScript projects, such as: JavaScript real-time errors Code Refactoring Local ...
javascript - javascript tutorial
最新发布
07-03
Table of Contents About the Tutorial Audience i Prerequisites i ...Table of Contents ii PART 1: JAVASCRIPT BASICS 1 1. JAVASCRIPT – Overview2 What is JavaScript?...Comments in JavaScript 7
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
测试大牛必会的前端--javascript基础知识
XXLoveSHT的博客
08-02 1274
  文档对象模型 dom 就是一个html dom 把 html 划分成了一个树结构 dom能够操作分支，改变样式改变内容   dom是有分支的 document 是具体的对象，是dom的一种实现方式，可以通过doucument 节点可以遍历文档里的所有子节点 document 能够操作页面上的元素 dom 可以看成是一个页面     &lt;!DOCTYPE...
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
数组2
weixin_33709364的博客
06-19 97
1. ***数组: API: 拼接和选取 修改 翻转****排序: 自定义排序算法: 冒泡排序 sort()1. 拼接和选取: 拼接: 将其它元素或其它数组拼接到当前数组末尾,返回新数组 var newArr=arr1.concat(值1,值2,arr2,......) 强调: 1. 无权修改...
js实现年月日联动功能
RoddyLD的博客
03-20 1296
js实现年月日联动功能 实现年月日联动最核心的就是要判断每个月份的天数，月份的天数可能是28或29或30或31天。然后通过appendChild()方法和getElementByID()方法实现年月日的联动功能。 具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
JavaScript基础题、练习题、考试题、面试题（一）
ZHANGJIN9546的博客
06-25 2万+
1.以下代码执行后，分别弹出来的值是： var num1=1; function testf1(){ num1=2; var num1; alert(num1); } function testf2(){ alert(num1); } testf1(); testf2(); A 2,1 B 2,2 C undefined,undefined D 2，undefined 正确答案: A 解析: te...
JavaScript基础练习（一）
flqbestboy的专栏
08-07 1万+
加法的案例改为 可以做加减乘除、求余五种运算 为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？(function(a){ alert("战士连续作战"+parseInt(a/24)+"天"+a%24+"小时"); }(89)); 小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该
掌握JavaScript第7版：从基础到Web2.0与安全实践
《JavaScript宝典(第7版)》是一本经典的编程指南，由美国作者Danny Goodman撰写，专为希望提升Web开发技能的读者设计。本书不仅涵盖了JavaScript的基础知识，还深入探讨了最新的编程技术，帮助读者掌握如何创造更具...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值