【前端学习】三 -JS 数学对象 DOM基础

最新推荐文章于 2022-09-22 12:36:47 发布

s-fox

最新推荐文章于 2022-09-22 12:36:47 发布

阅读量336

点赞数

分类专栏：前端学习之路文章标签：前端

本文链接：https://blog.csdn.net/qq_38930905/article/details/80285439

版权

前端学习之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Math属性的对象
属性	说明	对应的数学形式
PI	y圆周率
LN2	2的自然对数	n(2)
LN10	10的自然对数
LOG2E	以2为底的e的对数
LOG10E	以10为底的e的对数
SORT2	2的平方根
SORT1_2	2的平方个的倒数

对于所有角度都是以弧度为单位的例如180度应该写成Math.PI 这种写法为度数*Math.PI/180

120*Math.PI/180 //120度

Math对象中的方法
方法	说明
max(a,b,……,n)	返回一组数中的最大值
min()
sin(x)	正弦
cos(x)
tan(x)
asin(x)	反正弦
acos(x)
atan(x)
atan2（x）
floor(x)	向下取整
ceil(x)	向上取整
random()	生成随机数

随机生成某个范围内的整数 Math.floor(Math.random()*(m-n+1)+n)

DOM对象全称 Document Object Model(文档对象模型) W3C的一个标准
采用树结构 html元素时根元素 DOM节点一共有12种类型常见的有三种元素节点属性节点文本节点
可以用nodeType来判断一个节点的类型
只有元素节点才有子节点属性和文本没有子节点
获取元素的6种方法
getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelector()和querySeletorAll()
document.title和document.body
document.getElementById("id") 注意这个方法无法创建动态的DOM
document.getElementsByTagName("标签名") 获取的是一个伪数组，可以用length属性和下标但是不能用push()等方法
document.getElementsByClassName("类名") 获取的也是一个伪数组也不能动态创建DOM
document.querySelector(“选择器”) 表示满足选择条件的第一个元素
document.querySelectorAll(“选择器”) 表示满足选择条件的所有元素
nth-child(N)属于CSS3的选择器
document.getElementsByName("name") 对于表单元素来讲它有一个一般元素没有的属性 name 这个方法一般只用于表单元素
document.title和document.body 由于页面只有一个title和body 用于操作这两个元素
动态创建元素 createElement()创建元素节点 createTextNode()创建文本节点

获取元素的6种方法
getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelector()和querySeletorAll()
document.title和document.body

var e1=document.createElement("元素名");var txt= document.createTextNode("文本内容");e1.appendChild(txt);e2.appendChild(e1);

创建动态的复杂元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload = function(){
				var oInput = document.createElement("input");
				oInput.id="submit";
				oInput.type="button";
				oInput.value="提交";
				
				document.body.appendChild(oInput);   //动态创建复杂元素（带属性）
			}
		</script>
	</head>
	<body>
	</body>
</html>

插入元素常用两种方法 appendChild()和insertBefore()
A.appendChild(B) 把B插入到A中
oBtn.onClick =function(){} 为一个元素添加点击事件
A.insertBefore(B,ref) 将一个新元素插入到父元素中的某一个子元素之前
删除元素 A.removeChild(B) 删除A元素中的一个B元素
复制元素 obj.cloneNode(bool) obj表示被复制的元素 bool是一个布尔值 1表示复制元素本身以及这个元素下面的所有元素 0表示仅仅复制元素本身
替换元素 A.replaceChild(new,old)