JavaScript知识点总结(document对象)

最新推荐文章于 2022-07-09 16:39:13 发布

微笑smiled

最新推荐文章于 2022-07-09 16:39:13 发布

阅读量386

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript dom

本文链接：https://blog.csdn.net/weixin_43896747/article/details/88250652

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、什么是javascript

javascript它是一种前端的解释性单线程的脚本语言。
解释性语言:
源代码 -> (对于javascript每个浏览器都有一个js引擎) 对源代码进行从上到下逐行解析

二、语法详解

1、变量的声明
声明字符 var
注：

变量的第一个字符, 只能使用英文的大小写或者下划线(_)或者$符号
除了第一个字符之外, 其他的可以使用上述三种字符和数字
不能使用js的保留字和关键字
变量名不能超过255个字符4. 变量名不能超过255个字符
变量名对大小写是敏感的（y和Y是不同的变量）

2、数据类型：

字符串（String）、
数字(Number)、
布尔(Boolean)、
空（Null）、
未定义（Undefined）
数组(Array)、
对象(Object)、

注：
//1、在js中使用==判断2值是否相等
		===:要求值相等且类型相等
2、js提供了一个操作符typeof可以返回变量的具体类型
3、eval处理js中的字符串运算
document.write(eval("10 * 10") + "<br/>");

三、DOM对象

作用：获取标签节点！！通过结点获取或者设置标签属性！
一、获取页面元素节点对象
1、通过标签名称获取页面元素节点对象

获取p标签结点：

var node1 = document.getElementsByTagName("p")[1];//获取单个节点对象

var node2 = document.getElementsByTagName("p").item(1);//获取单个节点对象

1.2、获取标签体里的内容

innerHTML 2.innerText 3.outHMTL

document.write("node2内容:" + node2.innerHTML + "<br>");

document.write("node2内容:" + node2.innerText + "<br>");

document.write("node2内容:" + node2.outerHTML + "<br>");

2、通过标签元素的id属性获取

document.getElementById("a2");

3、通过标签的name属性获取标签对象

 document.getElementsByName("hobby");

4、通过class属性值获取标签节点对象

document.getElementsByClassName("basic");

二、修改标签结点对象

	var ulTag = document.getElementsByTagName("ul")[0];
	//添加节点
	/**
	 * 1.创建li节点
	 * 2.将该节点添加到ul中
	 */
	var templi = document.createElement("li");
	//向已创建的结点添加内容
	templi.innerText = "无序列表888";
	//查参添加之前最后一个元素结点对象
	document.write("ul的最后一个元素节点的内容：" + ulTag.lastElementChild.innerText + "<br/>");
	
	//2.将templi添加到ul中
	//默认都是从ul的最后添加元素
	ulTag.appendChild(templi);
	document.write("ul的最后一个元素节点的内容：" + ulTag.lastElementChild.innerText + "<br/>");
	
	//在指定的节点位置添加元素
	//ulTag.insertBefore(templi,ulTag.firstChild);
	
	//替换
	//ulTag.replaceChild(templi,ulTag.firstElementChild);
	
	//删除节点
	//ulTag.removeChild(ulTag.children[2]);
	
	//复制节点
	var tempUl = ulTag.cloneNode(true);
	//将复制后的节点添加到body节点中
	document.body.appendChild(tempUl);

三、修改标签样式
1、添加样式：

//获取节点对象
var pTag = document.getElementsByTagName("p")[0];

//1.单个样式设置
pTag.style.color="#0088CC";

//2.同时设置多个样式
pTag.style.cssText="font-size:30px;text-decoration:underline;";
pTag.style.backgroundColor = "yellow";

//3.通过class
pTag.className = "new";

//4.同时设置多个class属性值
pTag.classList.add("fixedwhidth");

2、删除样式

//删除样式
function delCSS() {
	var pTag = document.getElementsByTagName("p")[0];
	var divTag = document.getElementsByTagName("div")[0];
	
	//移除所有的class样式
	// pTag.className = "";
	
	//移除style属性中的样式
	// pTag.style.cssText = "";
	
	//删除部分样式
	pTag.style.removeProperty("background-color");
	
	//移除class属性中的某个样式
	divTag.classList.remove("white-color");
}

四、鼠标离开事件

Onfocus =》鼠标获得焦点触发的事件
onblur =》鼠标失去焦点事件

<body>
	<form action="#" method="post">
		用户名：<input type="text" onblur="checkUname(this)" />
		<span>*用户名必须超过10个字符</span><br />
		<input type="submit" value="提交"/>
	</form>
</body>
<script type="text/javascript">
	function checkUname(obj){
		if(obj.value.length<10){
			document.getElementsByTagName("span")[0].style.visibility = "visible";
		}else{
			document.getElementsByTagName("span")[0].style.visibility = "hidden";
			
		}
	}
</script>

微笑smiled

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript知识点总结(document对象)

一、什么是javascriptjavascript它是一种前端的解释性单线程的脚本语言。解释性语言:源代码 -&amp;gt; (对于javascript每个浏览器都有一个js引擎) 对源代码进行从上到下逐行解析二、语法详解1、变量的声明声明字符 var注：变量的第一个字符, 只能使用英文的大小写或者下划线(_)或者$符号除了第一个字符之外, 其他的可以使用上述三种字符和数字不能使用...
复制链接

扫一扫