JavaScriptDOM基础

最新推荐文章于 2022-09-03 11:10:53 发布

zerobaek

最新推荐文章于 2022-09-03 11:10:53 发布

阅读量333

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zerobaek/article/details/78243708

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScriptDOM基础

应用程序的编程接口

如何获取一个元素

如何访问一个元素样式

如何设置和删除属性

Part 1：

1.掌握基本的DOM查找方法

document.getElementById()

document.getElementByTagName()

2. 掌握如何设置DOM元素的样式

document.getElementById()

返回对拥有指定ID的第一个对象的引用

返回值：DOM对象

Id为DOM元素上id属性的值

document.getElementsByTagName()

返回一个对所有tag标签引用的集合

返回值：数组

tag为要获取的标签名称

获取摸个DOM对象

getElementsByTagName(“TagName”)[i]

（比如：var div=document.getElementsByTagName(“TagName”)[1];）

	<div class="box" id="box">
		元素1
	</div>
	<ul id="list1">
		<li>前端开发</li>
		<li>服务器端开发</li>
		<li>UI设计</li>
	</ul>
	<ol>
		<li>javaScript原生</li>
		<li>javaScript框架</li>
	</ol>
	<script>
       // 获取id为box的这个元素
       var box=document.getElementById("box");
       console.log(box);
       // 获取页面中所有的li
       var lis=document.getElementsByTagName("li");
       console.log(lis.length);
       // 获取id为list1下的所有的li
       var lis2=document.getElementById("list1").getElementsByTagName("li");
       console.log(lis2.length);
	</script>

获取的元素的意义：动态给获取元素添加样式

如何给元素动态设置样式：

JavaScript可动态给元素设置样式

设置元素样式

ele.style.styleName=styleValue

设置ele元素的css样式

1. ele为要设置样式的DOM对象

2. styleName为要设置的样式名称（不能使用“-”连字符形式font-size，使用驼峰命名形式fontSize）

3. styleValue为要设置的样式值

	<div class="box" id="box">
		元素1
	</div>
	<ul id="list">
		<li>前端开发</li>
		<li>服务器端开发</li>
		<li>UI设计</li>
		<li>UI设计</li>
		<li>UI设计</li>
	</ul>
	<script>
       // 设置id为box的这个元素的文字颜色,属性是减号连接的复合形式时
       // 必需要转换为驼峰形式
       var box=document.getElementById("box");
       box.style.color='#f00';
       box.style.fontWeight="bold";
       var lis=document.getElementById("list").getElementsByTagName("li");
       // 遍历每一个li
       for(var i=0,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].style.backgroundColor="#666";
          }else if(i==2){
             lis[i].style.backgroundColor="#999";
          }else{
          	 lis[i].style.backgroundColor="#333";
          }
       }
	</script>

Part 2：

1. 掌握innerHTML属性的应用

2. 掌握className属性的应用

3. 掌握如何在DOM元素上添加删除获取属性

innerHTMl

ele.innerHTML

返回ele元素开始和结束标签之间的HTML

ele.innerHTML=”html”

设置ele元素开始和结束标签之间的HTMl内容为html

className

ele.className

返回ele元素的class属性

ele.className=”cls”

设置ele元素的class属性为cls（重新设置类，动态添加class替换元素本身的class，而不是叠加）

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	  .on{border-bottom:1px solid #0f0;}
      .current{background:#ccc;color:#f00;}
	</style>
</head>
<body>
	<div class="box" id="box">
		元素1
	</div>
	<ul id="list">
		<li><i>前端开发</i></li>
		<li class="on"><b>服务器端开发</b></li>
		<li>UI设计</li>
	</ul>
	<script>
	   var lis=document.getElementById("list").getElementsByTagName("li");
       for(var i=0,len=lis.length;i<len;i++){
           console.log(lis[i].innerHTML);
           lis[i].innerHTML+='程序';
           lis[1].className="current";
       }
       console.log(document.getElementById("box").className);
	</script>
</body>
</html>

获取DOM元素属性或添加属性：

ele.getAttribute(“attribute”)

获取ele元素的attribute属性

1. ele是要操作的DOM对象

2. Attribute是要获取的html属性（如：id，type）

获取标签自带的属性（除class属性，因为class属性要通过DOM对象.className）的便捷语法：

DOM对象.属性，如p.id

设置属性：

ele.setAttribute(“attribute”,value)

在ele元素上设置属性

1. ele是要操作的dom对象

2. attribute为要设置的属性名称

3. value为要设置的attribute属性的值

移除属性：

ele.removeAttribute(“attribute”)

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	  .on{border-bottom:1px solid #0f0;}
      .current{background:#ccc;color:#f00;}
	</style>
</head>
<body>
    <p id="text" class="text" align="center" data-type="title">文本</p>
    <input type="text" name="user" value="user" id="user" validate="true">
	<script>
        var p=document.getElementById("text");
        var user=document.getElementById("user");  // null
        console.log(p.getAttribute("class"));  //p.className
        console.log(user.getAttribute("validate"));
        // 给p设置一个data-color的属性
        p.setAttribute("data-color","red");
        // 给input设置一个isRead的属性
        user.setAttribute("isRead","false");
        // 删除p上的align属性
        p.removeAttribute("align");
	</script>
</body>
</html>

zerobaek

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScriptDOM基础

JavaScriptDOM基础应用程序的编程接口如何获取一个元素如何访问一个元素样式如何设置和删除属性 Part 1：1.掌握基本的DOM查找方法document.getElementById()document.getElementByTagName()2. 掌握如何设置DOM元素的样式 document.getElementById()
复制链接

扫一扫