JS-DOM基本概念

最新推荐文章于 2024-02-16 09:23:57 发布

Arcueid_Brunestud

最新推荐文章于 2024-02-16 09:23:57 发布

阅读量328

点赞数

分类专栏：前端学习文章标签： DOM JavaScript

本文链接：https://blog.csdn.net/qq_39244173/article/details/102841197

版权

文章目录

认识DOM

DOM document object model 文档对象模型
在这里插入图片描述
html css 页面内容
js 页面行为操作
【注】DOM是打通html,css和js壁垒的一个工具

DOM种节点属性一共有三种
【注】在js种所有节点都是对象

<div title="属性节点">测试Div</div>

元素节点 <div ></div>
属性节点 title="属性节点"
文本节点 测试Div

DOM_byid元素节点属性

在这里插入图片描述

在获取class，不能直接class，必须使用className。
在style样式中，使用-链接的属性，访问的时候需要将-去掉，然后将后续的单词的首字母大写。
如：alert("div.style.backgroundColor");

DOM_bytagname

document.getElementsByTagName()
node.getElementByTagName()
【注】从node节点开始，找出所有符合条件的元素节点
参数：标签名
功能：获取当前页面上所有符合该标签名标准的元素节点
返回值：一个装有符合条件的元素节点的数组

DOM_byname

document.getElementsByName()
参数：name的值
返回值：一个装有符合条件的元素节点的数组
【注】name属性一般情况下，只有文本输入框的元素节点才有

DOM_byclassname

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		/*
			node.getElementsByClassName()
			功能：获取node节点下，所有符合条件的元素节点
			参数：class
			返回值：所有符合条件的元素节点组成的数组

			【注】getElementByClassName在低版本IE浏览器不支持
		*/

		window.onload = function(){
   
			var nodes = document.getElementsByClassName("box");
			//alert(nodes); //[object HTMLCollection]

			//获取ul下的class为box的元素节点
			var oUl = document.getElementById("ul1");
			var nodes = oUl.getElementsByClassName("box")

			for (var i = 0; i < nodes.length; i++) {
   
				alert(nodes[i].innerHTML);
				}
		}

		/*
			封装函数，封装一个兼容的方法

			*通配符  任意类型的元素节点
		*/
		function elementByClassName(parent, classStr){
   
			//<1>找到parent下所有的元素节点
			var nodes = parent.getElementsByTagName("*")
			var result = [];//用记录符合条件的元素节点
			for (var i = 0; i < nodes.length; i++) {
   
				//<2>如果符合条件，添加到数组中
				if (nodes[i].className == classStr) {
   
					result.push(node[i]);
				}
			}
			return result;
		}
	</script>
</head>
<body>
	<ul id = "ul1">
		<li>111111</li>
		<li class = "box">222222</li>
		<li>333333</li>
		<li class = "box">444444</li>
	</ul>
	<ol id = "ol1">
		<li class = "box">555555</li>
		<li>555555</li>
		<li class = "box">555555</li>
		<li>555555</li>
	</ol>
		
</body>
</html>

DOM_获取当前样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"

最低0.47元/天解锁文章

Arcueid_Brunestud

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-DOM基本概念

文章目录认识DOMDOM_byid元素节点属性认识DOMDOM document object model 文档对象模型html css 页面内容js 页面行为操作【注】DOM是打通html,css和js壁垒的一个工具DOM种节点属性一共有三种【注】在js种所有节点都是对象<div title="属性节点">测试Div</di...
复制链接

扫一扫