5.JavaScriptDOM基础

最新推荐文章于 2024-01-04 20:20:53 发布

SinceSpringOnU

最新推荐文章于 2024-01-04 20:20:53 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/SinceSpringOnU/article/details/105211973

版权

一、JavaScript-DOM查找

完整的JavaScript由ECMAscript（语法）、Browser Object（DOM访问和接触网页内容的接口、BOM浏览器窗口的缩放等）（特性）组成的。

1.DOM查找方法：

`Id`

语法：document.getElementById(“id”);
功能：返回对拥有指定ID的第一个对象的引用。
返回值：DOM对象
说明：id为DOM元素上id属性的值

 <div class="box" id="box">
  元素
 </div>
 <script type="text/javascript">
  var box=document.getElementById("box");
  console.log(box);
 </script>

在这里插入图片描述

`TagName`

语法：getElementsByTagName(“tag”);
功能：返回对所有tag标签引用的集合。
返回值：数组。
说明：tag为要获取的标签属性。

二、如何设置元素样式：

语法：ele.style.styleName=styleValue
功能：设置ele元素的CSS样式
说明：

ele为要设置样式的DOM对象
styleName为要设置的样式名称（不能有-，用驼峰形式）
styleValue为要设置的样式值

  <div class="box" id="box">
  元素
 </div>
 <ul id="list">
  <li><i>前端开发</i></li>
  <li>服务器开发</li>
  <li>UI设计</li>
 </ul>
 <script type="text/javascript">
  var bb=document.getElementById("box");
  bb.style.color="red";
  bb.style.fontWeight="bold";
  var lis=document.getElementById("list").getElementsByTagName("li");
  //TagName下是数组，不是DOM对象，没有style属性，需要遍历每一个li
  for (var i = 0; i<lis.length; i++) {
   lis[i].style.color='#00f';
   if(i==0)
   {
    lis[i].style.backgroundColor="#ccc";
   }
   else 
   {
    lis[i].style.backgroundColor="#666";
   }
  }

在这里插入图片描述

三、innnerHTML和className

1. `innnerHTML`

语法：ele.innerHTML=“html”
返回值：返回ele开始和结束标签之间的HTML
功能：设置ele开始和结束标签之间的HTML7

<ul id="list">
  <li><i>前端开发</i></li>
  <li>服务器开发</li>
  <li>UI设计</li>
 </ul>
 <script type="text/javascript">
  var lis=document.getElementById("list").getElementsByTagName("li");
  for (var i = 0; i<lis.length; i++) {
   console.log(lis[i].innerHTML);
   lis[i].innerHTML=lis[i].innerHTML+'程序';
  }
 </script>

在这里插入图片描述

2.`className`

语法：ele.className=“cls”
返回值：返回ele元素的class属性
功能：设置ele元素的class属性为cls

 <ul id="list">
  <li><i>前端开发</i></li>
  <li><b>服务器开发</b></li>
  <li>UI设计</li>
 </ul>
 <script type="text/javascript">
  var lis=document.getElementById("list").getElementsByTagName("li");
  for (var i = 0; i<lis.length; i++) {
   console.log(lis[i].innerHTML);
   lis[i].innerHTML=lis[i].innerHTML+'程序';
   lis[1].className="current";
  }

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
 <title>DOM</title>
 <meta charset="utf-8">
 <style type="text/css">
  .current{
   background-color: #ccc;
   color: #f00;
  }
 </style>
</head>
<body>
   <div class="box" id="box">
    元素
    </div>
  <ul id="list">
  <li><i>前端开发</i></li>
  <li><b>服务器开发</b></li>
  <li>UI设计</li>
 </ul>
 <script type="text/javascript">
  var lis=document.getElementById("list").getElementsByTagName("li");
  for (var i = 0; i<lis.length; i++) {
   console.log(lis[i].innerHTML);
   lis[i].innerHTML=lis[i].innerHTML+'程序';
   lis[1].className="current";
  }
  console.log(document.getElementById("box").className);
 </script>
</body>
</html>

在这里插入图片描述

四、DOM属性设置与获取

1. 获取属性`getAttribute`

语法：ele.getAttribute(“attribute”);

 <p id="text" align="center" data-type="title" class="abc">文本</p>
 <script type="text/javascript">
  var p=document.getElementById("text");
  console.log(p.id);   //text
 </script>

curdate class data-type等等的自定义属性是无法被上述方法获取的，需要用到getAttribute

 <p id="text" align="center" data-type="title" class="abc">文本</p> 
 <script type="text/javascript">
  var p=document.getElementById("text");
  console.log(p.getAttribute("class"));   //abc
  					//此处就用到了自定义的class属性 可以在控制台上看到abc
  					//试了一下 hii="abc" console.log(hii)也是可以打印出来的
  //等同于console.log(p.className);
  //console.log(p.hiiName)不可用
 </script>

2.设置属性`setAttribute`

语法：ele.setAttribute(“attribute”,value);

value为设置的attribute属性的值

 <p id="text"  data-type="title" class="abc">文本</p> 
 <script type="text/javascript">
  var p=document.getElementById("text");
  p.setAttribute("align","center");
 </script>

3.删除属性

语法：ele.removeAttribute(“attribute”);
功能：删除ele上的attribute属性

 <p id="text" align="center" data-type="title" class="abc" hello="ee">文本</p> 
 <script type="text/javascript">
  var p=document.getElementById("text");
  p.removeAttribute("align");
 </script>

在这里插入图片描述

SinceSpringOnU

关注

0
点赞
踩
0

收藏

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

一、JavaScript-DOM查找完整的JavaScript由ECMAscript（语法）、Browser Object（DOM访问和接触网页内容的接口、BOM浏览器窗口的缩放等）（特性）组成的。1.DOM查找方法：Id语法：document.getElementById(“id”);功能：返回对拥有指定ID的第一个对象的引用。返回值：DOM对象说明：id为DOM元素上id属性的...
复制链接

扫一扫