javascript-DOM基础

最新推荐文章于 2024-05-26 18:25:36 发布
最新推荐文章于 2024-05-26 18:25:36 发布
阅读量491 收藏
点赞数
分类专栏： javascript笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38092043/article/details/83280906
版权

目录

 

语法基础

流程控制

函数

字符串对象

数组对象

时间对象

数学对象

DOM对象

获取元素(注意复数s)

创建元素

插入元素

删除元素

复制元素

替换元素

语法基础

变量命名：字母数字下划线和$（不能包括除此之外的字符）

数据类型：数字、字符串、布尔值、未定义的值（undefined）和空值（null）

条件运算符：var  条件？ 表达式1：表达式2；

类型转换：一个数字与字符串相加为字符串 " "+10 -->"10"字符串10

字符串转为数字：

  1. Number（）数字型字符串转换为数字
  2. parseInt（）和parseFloat（）首字母为数字的任意字符

document.write（<br />）在页面输出一个内容

alert（\n）弹出一个对话框

注释：// or /* */

流程控制

  1. 顺序结构
  2. 选择结构
  3. 循环结构

顺序结构：从上到下，从左到右

选择结构：

单向选择：if

双向选择：if..else

三目运算符 ？：；

多向选择：if-elseif...else

嵌套

switch（变量or值）

      {

          case 1: 语句; break;

          default：语句；

       }

循环结构：

while（）{}

do{}while；

for（；；）{}

函数

定义

函数都用function（）{

}定义

  1. 有返回值函数
  2. 没有返回值函数

调用

  1. 在超链接中调用 
    <a href="javascript:expressMes()">表达</a>

     

  2. 在事件中调用 
    <input type="button" onclick="alterMes()"value="提交" />

     

嵌套函数

function func(a)
{
    function multi(x)
    {
        return x*x;
    }
    var m=1;    
    for(var i=1;i<=multi(a);i++)
    {
        m=m*i;
    }
    return m;
}
var sum=func(2)+func(3);
document.write(sum);

字符串对象

  • 字符串对象：String
  • 数组对象：Array
  • 日期对象：Date
  • 数值对象：Math

字符串名.length

字符串名.toLowerCase

字符串名.toUpperCase

字符串名.charAt（下标）

字符串名.substring【start，end）

字符串名.replace（"原字符串","替换字符串 "）

字符串名.replace（"正则表达式","替换字符串 "）

str.replace(/loser/g，"hello"）修改所有loser

等价于

str.repalce（"loser","hero"）仅修改第一个

字符串名. split（"分割符"，获取分割后截取的前n个数）

分割字符串后系统会将这个字符串转换为一个数组（空格也是一个字符）

字符串名.indexOf（指定字符串名)首次出现下标位置

字符串名.lastIndexOf（指定字符串名）末次出现下标位置

包含的话返回字符串首字母下标或尾字母下标，不存在则返回-1

数组对象

一个数组还是可以存储不同数据类型的

  1. var 数组名=new Array（元素1，元素2...）
  2. var 数组名=【元素1，元素2...】

数组名.length

数组.slice[start,end)

document.write(arr.slice(0,2));

数组.unshift（）开头加新元素

数组.shift（）删除开头元素

数组.push（）结尾加新元素

数组.pop（）删除结尾元素

unshift（） shift（）

push（）pop（）

数组名.sort（函数名）

<script type="text/javascript">
	function up(a,b)
	{
		return a-b;
	}
	function down(a,b){
		return b-a;
	}
	var arr=[3,9,1,12,50,21];
	arr.sort(up);
	document.write("升序："+arr.join(" ")+"<br />");
	arr.sort(down);
	document.write("降序："+arr.join(" "));
</script>

arr.reverse（）

数组名.join（"连接符"）

将数组连接成字符串

<script type="text/javascript">
	var str1="绿叶学习网";
	var str2=str1.split("").join("><");
	document.write(str2+"<br/>")
	var arr=str2.split("");
	arr.unshift("<");
	arr.push(">");
	var result = arr.join("");
	document.write(result);
</script>

时间对象

var 时间对象名 = new Date（）

document.write(date);

时间对象.getFullYear（）

时间对象.getMonth（）

时间对象.getDate（）

时间对象.getHours（）

时间对象.getMinutes（）

时间对象.getSeconds（）

时间对象.getDay（）0为星期日 0-7

时间对象.setFullYear(year,month,day) 4位数

时间对象.setMonth(month,day)  0-11！！！！！

时间对象.setDate(day) 1-31

时间对象.set（Hour 0-23，Minute 0-59，Second 0-59，Millisec 0-29）

数学对象

Math.属性

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

角度：角度*Math.PI/180

Math.方法

max（a,b,c）

min（a,b,c）

sin（x）sin30°:0.4999999999994 JavaScript计算有一定精度，但是误差非常小可以忽略不计

cos（x）

tan（x）

asin（x）

acos（x）

atan（x）

floor（x）向下取整 <=x的最小整数

ceil（x）向上取整>=x的最大整数

random（）

abs（x）

sqrt（x）

log（x）e为底

pow（x，y）

exp（x）  返回e的指数

随机数

Math.random（）0-1的随机数

随机生成某个范围内的任意数

Math.random（）*m         0~m

Math.random（）*m+n     n~m+n

Math.random（）*m-n      -n~m-n

Math.random（）*m-m     -m~m

随机生成某个范围内的任意整数

Math.floor（Math.random(m)）  0~m-1

Math.floor（Math.random(m+1)）  0~m

Math.floor（Math.random(m+1)+1）  1~m

Math.floor（Math.random(m-n+1)+n）  任意数~ 任意数

 

DOM对象

DOM(Document Object Model 文档对象模型)

DOM操作简单理解为“元素操作”

DOM采用“树形结构”用“树节点”来表示页面中的每一个元素

DOM节点12种类型

元素节点

属性节点

文本节点

节点包括元素

nodeType属性判断一个节点的类型

元素节点                     1

属性节点                     2

文本节点                     3

所有节点都是独立的部分，元素节点可以拥有子节点

获取元素(注意复数s)

getElementById( )

getElementsByClassName( )

getElemenstByTagName( )

querySelector和querySelectorAll( )

getElementsByName( )

document.title和document.body

 

getElementById("Id名" )

<script>
    window.onload=function(){
    var oDiv = document.getElementById("div1");
    oDiv.style.color = "red";
}
</script>

<body>
    <div id = "div1">Javascript</div>
</body>
  1. 表示在整个页面加载完后执行的代码块，浏览器是从上到下解析页面的
  2. 给变量命名习惯以“o”开头区别于其他的变量，一眼认出DOM对象

 

getElementsByClassName("类名" )

<script>
    window.onload=function(){
    var oLi = document.getElementsByClassName("selector");
    oLi[0].style.color = "red";
}
</script>

<body>
    <ul id = "list">
        <li class = "selector">HTML</li>
        <li class = "selector">CSS</li>
        <li class = "selector">Javascript</li>
    </ul>
</body>

得到类数组（伪数组，只能用length和下标）

getElementsByTagName("标签名" )

可操作动态DOM的唯一方法，获取元素集合

<script>
    window.onload=function{
    var arr = ["HTML","CSS","Javascript","JQuery"]
    var oUl = document.getElementById("lsit");
    var oLi = oUl.getElementsByTagName("li");

    for(vari = 0;i<oLi.length;i++)
    {
        oLi[i].innerHTML = arr[i];
        oLi[i].style.color = "red";
    }
}
</script>

<body>
    <ul id = "list">
        <li class = "selector">HTML</li>
        <li class = "selector">CSS</li>
        <li class = "selector">Javascript</li>
    </ul>
</body>
  1. 获得ul下所有li元素(精准获取)
  2. innerHTML表示元素里的内容
  3. 使用 getElementsByTagName() 方法获取文档中的一个特定的元素使用 getElementsByTagName("p")[0];

操作动态创建的DOM

<script>
    window.onload=function(){
    document.body.innerHTML = "<input type='button' value = '按钮' /><input type='button' value = '按钮' /><input type='button' value = '按钮' />";
    //操作动态创建的DOM对象
    var oBtn = document.getElementsByTagName("input");
    oBtn[0].onclick = function()
    {
        alert("表单元素总共有"+oBtn.length+"个");
    }
}
</script>

双引号成对出现的话，Javascript无法判断哪个是一对

querySelector(CSS选择器)和querySelectorAll( CSS选择器)

<script>
    document.querySelector("#main");
    document.querySelector("#list li:nth-child(1)");
    document.querySelectorAll("#lsit li");
    document.querySelectorAll("#input:checkbox");
</script>

页面只有一个元素的时候，建议用getElementById,效率更高

getElementsByName("name名" )

只用于表单元素一般用于radio和checkbox

<script>
		window.onload = function(){
			var oInput = document.getElementsByName("status");
			oInput[2].checked  = true;
		}
</script>

<body>
	你的最高学历：
	<label><input type="radio" name="status" value="本科" />本科</label>
	<label for="硕士"><input type="radio" name="status" id="硕士" /><br />硕士</label>
	<label><input type="radio" name="status" value="博士" />博士</label>
</body>

 

document.title和document.body

document.title = "梦想是什么";
document.body.innerHTML = "<strong style:"color:red">梦想就是一种让你感觉坚持就是幸福的东西。";

                

创建元素

createElement("元素名")

           createTextNode("文本内容")

<script>
			window.onload=function(){
				//创建多元素
				var oTable = document.createElement("table");
				for(var i=0;i<3;i++)
				{
					var oTr = document.createElement("tr");
					for(var j=0;j<3;j++)
					{
						var oTd = document.createElement("td");
						var oText = document.createTextNode("内容"+j);
						oTd.appendChild(oText);
						oTr.appendChild(oTd);
					}
					oTable.appendChild(oTr);
				}
				document.body.appendChild(oTable);
			}
		</script>


JavaScript动态创建删除元素
创建元素带属性

  • <input id="submit" type="button" value="提交" />

           oInput.id="submit";

           oIput.type="button";

           oIput.value="提交";

  • <img class="pic" src="img/icon_01.gif"  />

           oImg.className = "pic";
class以作为保留字使用

插入元素

appendChild（）

insertBefore（） A.insertBefore（新元素B，A.firstElementChild）    //lastElementChild

<script type="text/javascript">
		window.onload=function(){
			var oBtn = document.getElementById("btn");
			oBtn.onclick = function(){
			var oUl = document.getElementById("list");
			var oTxt = document.getElementById("txt");
			var TextNode = document.createTextNode(oTxt.value);
			var oLi = document.createElement("li");
			oLi.appendChild(TextNode);
			oUl.appendChild(oLi);
			oUl.insertBefore(oLi,oUl.firstElementChild);
		};
		}
	</script>

删除元素

removeChild（）

复制元素

被复制元素.cloneNode(bool)

1或true：表示复制元素本身和该元素下的所有子元素

0或false：表示仅仅复制元素本身

<script type="text/javascript">
		//insertBefore（）
		//removeChild()
		//obj.cloneNode(bool)1全部 0自身
		window.onload=function(){
			var oBtn = document.getElementById("btn");
			
			
			var oUl = document.getElementById("list");
			document.body.appendChild(oUl.cloneNode(1));
			oBtn.onclick = function()
			{
				
				var oUl = document.getElementById("list");
				var oTxt = document.getElementById("txt");
				var textNode = document.createTextNode(oTxt.value);
				var oLi = document.createElement("li");
				oLi.appendChild(textNode);
				oUl.insertBefore(oLi,oUl.firstElementChild);
				oUl.removeChild(oUl.lastElementChild);
			}
			/*
			1.获得无序列表元素和单行文本元素
			2.以文本框的值为内容创建文档节点
			3.创建li
			4.文档节点插入li
			5.li插入无序列表
			
			*/
		}
	</script>
<body>
		<ul id="list">
			<li>HTMl</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<input type="txt" id="txt"/>
		<input id="btn" type="button" value="输入"/>
</body>

替换元素

父元素.replaceChild（new，old）

<script>
		window.onload=function(){
			var oBtn =document.getElementById("btn");
			oBtn.onclick=function(){
			var e1 = document.getElementsByTagName("p")[0];
			var oTag = document.getElementById("tag");
			var oTxt  = document.getElementById("txt");
			var e2 = document.createElement(oTag.value);
			
			var textNode = document.createTextNode(oTxt.value);
			e2.appendChild(textNode);
			document.body.replaceChild(e2,e1);
			
			
			}
			
		}
	</script>
	<body>
		<p>JavaScript</p>
		<hr />
		输入标签：<input id="tag" type="text"/><br />
		输入内容：<input id="txt" type="text"/><br />
		<input type="button" id="btn" value="替换"/>
	</body>

 

余余余鱼
关注
专栏目录
JavaScript----DOM基础知识（一）什么是DOM？
yufanhui的博客
07-10 2618
 什么是DOM？DOM（document object model）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。DOM是由脱胎于微软公司开发的DHTML，1998年DOM  1成为了W3C的推荐标准，为基本的文档结构查询提供了接口。DOM--"D"：文档如果没有“D”，DOM就没有任何意义，当创...
Javascript-DOM编程艺术研究.docx
11-17
在DOM中，`document`对象是最基础的对象，它代表了整个网页内容。 - **内建对象（Native Objects）**，如Array、Math、Date等，是JavaScript语言内置的对象，可以直接使用。 - **宿主对象（Host Objects）**，如`...
javascript数组和对象嵌套innerHTML显示页面
weixin_30552811的博客
07-28 421
思路： 先搭HTML页面框架，写好CSS样式。将标签写上id，同类型标签构成一个数组，所以需要赋不同的id名。 遍历数组里每个对象，判断当前键是否等于我们要显示出来的标签，如果是就将其innerHTML出来。 全局代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UT...
JS动态操作Dom
weixin_45562774的博客
09-05 524
动态操作dom var tab = document.getElementById(“tab”) var btn = document.getElementById(“btn”) var f = document.getElementsByTagName(“div”) 动态操作dom的方法: 1.动态创建元素:document.createElement("div") var a = do...
2020.08.23 DOM基础
weixin_48364327的博客
08-23 308
DOM结构 一句话总结：DOM操作，可以简单的理解成元素操作。 我们在操作元素时，其实就是把这个元素看成对象，然后使用这个对象的属性和方法来进行相关操作 注：节点和元素是不一样的概念，节点包括元素，常见的节点有元素节点，属性节点、文本节点 获取元素的相关方法（重要） * getElementById（"id名"） * getElementsByClassName("类名") * getElementsByTagName("标签名") * getElementsByName("name名") * qu
JavaScript-DOM-基础：节点查找与节点操作
2301_82244182的博客
05-12 933
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript---DOM---DOM简介、获取元素、事件基础、操作元素---11.5
weixin_50768118的博客
12-02 970
DOM简介、获取元素、事件基础、操作元素
React 路由react-router-dom详解
m0_64875238的博客
04-08 9076
React 路由react-router-dom详解(路由嵌套+路由传参+路由权限+路由优化 按需导入+404页面)
JavaScript-DOM 学习（含案例源码）
weixin_45515107的博客
05-05 1930
1、DOM概念 文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DPM接口，通过这些DOM接口可以改变网页的内容、结构和样式 1.1、DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 注意：DOM把
WebAPI-DOM基础
passworddddddd的博客
05-26 1778
计算样式：元素最终计算出来的样式，只读（最终样式-设置的内联样式不一定就是最终显示的效果，《css属性计算过程》）getComputedStyle(dom)：获取该元素的计算样式，无法被重新赋值。*布尔属性会被自动转成Boolean，比如：下拉列表的checked属性。一个页面对应一个dom树，window.document：dom树的根。*标准属性始终都是存在的，不管你是否有在元素中设置该属性。*内联样式：元素的style属性中属性的样式，可以读写.*当给样式的赋值不合法时，赋值语句无效，不会报错。
JS学习笔记05-DOM基础
欢迎访问我的主页：https://www.bookbook.cc
04-24 7170
文章目录一、DOM基础1.1 什么是DOM？二、DOM节点2.1 什么是DOM节点？2.2 childNodes 获取子节点(会获取文本节点)2.3 nodeType 返回元素的节点类型。2.4 nodeName 返回元素的名称。2.5 nodeValue 设置或返回指定节点的节点值。2.6 children 获取子节点2.7 parentNode 获取父节点 一、DOM基础 1.1 什么是DO...
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
例如，`document.getElementById()`方法是DOM操作的基础，它允许我们通过元素ID找到特定的DOM节点。一旦找到目标节点，就可以修改它的属性，如`innerHTML`来改变元素内部的HTML，或者使用`style`对象改变样式。 ...
Javascript-DOM
03-26
了解并熟练掌握JavaScript DOM是成为一名优秀前端开发者的基础。通过实践和学习，你可以构建出响应式、高性能的Web应用，并实现丰富的用户交互。在`Javascript-DOM-main`这个项目中，可能包含了练习代码和示例，可以...
js-dom-fundamentals:JavaScript和DOM基础
05-18
JavaScript和DOM基础 如果您对JavaScript的基本知识充满热情，那么掌握它非常重要。 如果您具有扎实JavaScript基础知识，那么在开始使用新框架时，唯一需要熟悉的就是语法。 基本规则将是相同的，因为在所有抽象层下...
JavaScript-DOM.rar_javascript
09-20
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它是HTML或XML文档的一种结构化表示，允许开发者通过编程方式来访问和修改...理解DOM的本质、掌握其操作方法，是成为一名优秀前端工程师的基础。
沈阳建筑大学在河南2021-2024各专业最低录取分数及位次表.pdf
最新发布
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
贵州茅台数据(1).xlsx
09-16
贵州茅台数据(1)
cwgl_jy1301.doc
09-16
cwgl_jy1301.doc
java-ssm+jsp游戏账号交易系统实现源码(项目源码-说明文档)
09-16
登录进入游戏账号交易系统可以查看系统用户管理，用户信息管理，海洋新闻管理，海鲜信息管理，购买信息管理，订退单信息管理和系统管理首页、个人中心、卖家管理、用户管理、游戏类别管理、手续费用管理、地下城与勇士管理、地下城账号购买、地下城账号换绑管理、地下城账号申诉管理、地下城私信聊天管理、地下城私信回复管理、英雄联盟管理、英雄联盟购买管理 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
JavaScript操作DOM基础教程
"这篇笔记主要介绍了JavaScript中对DOM（文档对象模型）的操作，包括获取HTML元素、节点关系以及节点类型的认识。" 在JavaScript中，DOM（文档对象模型）是HTML或XML文档的一种结构化表示，它允许我们通过编程方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值