javascript新手入门DOM

最新推荐文章于 2023-12-28 14:40:45 发布

smilecb

最新推荐文章于 2023-12-28 14:40:45 发布

阅读量1.5k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_45432976/article/details/109072666

版权

javascript 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

DOM: 全称Document Object Model 文档对象类型
js通过DOM可以对HTML文档进行操作，只要了解DOM就可以随心所欲的操作web页面
文档：整个HTML网页文档
对象：将网页中的的每一个部分转换为对象
模型：用来表示对象之间的关系，这样可以方便获取对象
节点：构成网页最基本的组成部分，网页中每一个部分都可以看成一个节点
事件：浏览器和用户之间的交互行为比如：点击按钮，鼠标移动

对象的获取
方式1：通过ID获取获取时会返回第一个id

//document.getElementById("id名");
	<script type="text/javascript">
		window.onload=function()
		{
			var one=document.getElementById("one");//通过ID来获取对象
			console.log(one.innerHTML);//获取对象的文本内容
			console.log(one.style.color);//获取对象的样式
		}
	</script>
	</head>
	<body>
		<div id="one" style="color: red;">123</div>
		<div id="one">456</div>
		<div id="one">7</div>
	</body>

会打印出 123 ，red
方式二：通过标签名来获取对象，结果会返回一个数组

	<script type="text/javascript">
		window.onload=function()
		{
			var p=document.getElementsByTagName('p');
			console.log(p);
		}
	</script>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</body>

方法3 通过class来获取对返回一个数组

<script type="text/javascript">
		window.onload=function()
		{
			var p=document.getElementsByClassName("a");
			console.log(p);
		}
	</script>
	</head>
	<body>
		<p class="a">1</p>
		<p class="a">2</p>
		<p class="a">3</p>
		<p class="a">4</p>
	</body>

HTML5新增
document.querySelector(选择器)
document.querySelectorAll(选择器)

<script type="text/javascript">
		window.onload=function()
		{
			var p=document.querySelector('.a');
			console.log(p);
		}
	</script>
	</head>
	<body>
		<p class="a">1</p>
		<p class="a">2</p>
		<p class="a">3</p>
		<p class="a">4</p>
	</body>

获取body元素
document.body
获取HTML元素
document.documentElement

smilecb

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript新手入门DOM

DOM: 全称Document Object Model 文档对象类型js通过DOM可以对HTML文档进行操作，只要了解DOM就可以随心所欲的操作web页面文档：整个HTML网页文档对象：将网页中的的每一个部分转换为对象模型：用来表示对象之间的关系，这样可以方便获取对象节点：构成网页最基本的组成部分，网页中每一个部分都可以看成一个节点事件：浏览器和用户之间的交互行为比如：点击按钮，鼠标移动对象的获取方式1：通过ID获取获取时会返回第一个id//document.getElement
复制链接

扫一扫