JavaScript的DOM基础

最新推荐文章于 2022-07-18 07:45:00 发布

一只编程的嵩鼠

最新推荐文章于 2022-07-18 07:45:00 发布

阅读量217

点赞数

分类专栏：前端小白入门文章标签： javascript html

本文链接：https://blog.csdn.net/qq_44682019/article/details/108896236

版权

前端小白入门专栏收录该内容

30 篇文章 0 订阅

订阅专栏

DOM基础
掌握基本的DOM查找方法
document.getElementById()
document.getElementByTagName()
掌握如何设置DOM元素的样式

在这里插入图片描述

<div class="box" id="box">
csdn
</div>
<script>
var box = document.getElementById("box");
console.log(box);
</script>

在这里插入图片描述

<div class="box" id="box">
<ul id="list1">
	<li>list1</li>
	<li>list2</li>
	<li>list3</li>
</ul>
<ol>
	<li>list4</li>
	<li>list5</li>
	<li>list6</li>
</ol>
</div>
<script>
var list = document.getElementByTagName("li");
console.log(list.length);//6
var list = document.getElementById("list1").getElementByTagName("li");
console.log(list.length);//3

</script>

动态给获取元素添加样式
如何设置呢
之前用css是这样设置的：

#idgreen p b{color: purple;}
div p b{coLor:orange;}
b{color:yellow;}
#idblue{color:blue;}

那js怎么来搞呢？
在这里插入图片描述
styleName为要设置的样式名称，不能使用“-”连字符形式font-size，应该使用驼峰形式fontSize。

var box = document.getElementById("box");
box.style.color="#f00";
box.style.fontWeight="bold";

ele必须为DOM对象，对应前面的数组应该这样做：
遍历每一个li

var lis = document.getElementById("list1").getElementByTagName("li");
for(var i=o,len=lis.length;i<len ; i++){
	lis[i].style.color='#00f';
	if(i==0){
		lis[i].style.backgroundColor="#ccc";
	}else if(i==1){
		lis[i].styie.backgroundColor="#666";
	}else if (i==2){
		lis[i].styie.backgroundColor="#999";
	}else{
		lis[i].style.backgroundColor="#333";
	}
}

innerHTML
在这里插入图片描述

var lis = document.getElementById("list1").getElementByTagName("li");
for(var i=o,len=lis.length;i<len ; i++){
	console.log(lis[i].innerHTML);
	//给内容加字
	lis[i].innerHTML=lis[i].innerHTML+'程序';
}

innerHTML:获取和设置标签之间的文本和html内容

在这里插入图片描述
动态添加class替换元素本身的class

lis[1].className="current";//设置或替换
console.log(document.getElementById("box").className);

如果元素有2个以上的class属性值，那么获取这个元素的className属性时，会将它的class属性值都打印出来。

如何获取DOM元素属性或添加属性?
在这里插入图片描述
HTML属性常用的比如id ，type
获取语法：DOM对象.属性，如p.id
除class属性（会返回undefined）以外，所有的标准自带的属性均可用此方法获取。（要获取class的话要用className或者用getAttribute(class)。）

<body>
	<p id="text" class="text" align="center" data-type="title">文本</p>
	<script>
		var p=document.getElementById ( "text" );
		console.log(p.getAttribute ("data-type" ) ) ;
		var user=document.getElementById ( "t" );//找不到就是null
		console.log(user.type ) ;//undefined
	</script>
</body>

对于自定义的属性要用getAttribute()才行。

在这里插入图片描述

var p=document.getElementById ( "text" );
p.setAttribute("data-color","red");
p.setAttribute("isRed","false");//到浏览器它可能转换为isred小写
p.removeAttribute("align");

在这里插入图片描述

NEXT:
页面交互中，许多都是事件来触发的，比如鼠标事件，键盘事件等等！

一只编程的嵩鼠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的DOM基础

DOM基础掌握基本的DOM查找方法document.getElementById()document.getElementByTagName()掌握如何设置DOM元素的样式<div class="box" id="box">csdn</div><script>var box = document.getElementById("box");console.log(box);</script><div class="box"
复制链接

扫一扫

专栏目录