JavaScript DOM编程基础

最新推荐文章于 2024-07-24 11:09:48 发布

bing人

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量117

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/2201_75455485/article/details/129850467

版权

一.什么是DOM？

文档对象模型，是W3C组织推荐的处理课扩展标记语言的标准编程。

1.2 DOM树

当网页被加载时，浏览器会创建页面的文档对象模型，被结构化的称为对象树。

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

注意事项：DOM把以上内容都看做是对象

二、查找 HTML DOM 元素[标签，属性，文本内容]

2.1 getElementByID()

使用getElementById()方法可以获取带有ID的元素对象

<div id="oDiv">zking zz is a nice man</div>
<script type="text/javascript">
var oDiv = document.getElementById('oDiv');
console.log(oDiv)
</script>

2.2 getElementsByTagName()

使用getElementsByTagName()方法可以返回带有指定标签名的对象集合。

document.getElementsByTagName('标签名')

还可以获取某个元素（父元素）内部所有指定标签名的子元素。

element.getElementsByTagName('标签名');

2.3 getElementsByName()

getElementsByName() 方法可返回带有指定名称的对象的集合。

getElementsByName() 方法可返回带有指定名称的对象的集合。

2.4 通过HTML5新增的方法获取

//根据类名返回元素对象集合
document.getElementsByClassName('类名');

//根据指定选择器返回第一个元素对象切记里面的选择器需要加符号
document.querySelector('选择器');

//根据指定选择器返回
document.querySelectorAll('选择器');

2.5 获取特殊元素（body、html）

获取body元素

document.body

获取html元素

document.documentElement;

三、改变 HTML 元素【内容】

JavaScript的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里的内容，属性等操作。注意以下的是属性：

方法描述
element.innerHTML = new html content 改变元素的 HTML 内容
element.innerTEXT = new text 改变元素的文本内容
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.hasAttribute(attribute) 判断元素是否有该属性
element.removeAttribute(attribute) 删除元素属性
element.style.property = new style 改变 HTML 元素的样式

方法	描述
element.innerHTML = new html content	改变元素的 HTML 内容
element.innerTEXT = new text	改变元素的文本内容
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.hasAttribute(attribute)	判断元素是否有该属性
element.removeAttribute(attribute)	删除元素属性
element.style.property = new style	改变 HTML 元素的样式

3.1 element.innerHTML

元素属性 innerHTML 就是元素的 HTML 代码，当查找到元素后，可以对其 innerHTML 属性进行重新赋值修改。

<div>
<h1>Hello World</h1>
</div>
<script>
var h1 = document.querySelector("div");
// 将原本的div里边的所有HTML内容更改，如果没有子元素，InnerHTML 就会修改该元素下的 Text 内容
h1.innerHTML = "<h2>2020-05-05</h2>";
</script>

// 输出结果
2020-05-05

3.2 element.innerText

<h1>Hello World</h1>
<script>
var h1 = document.querySelector("h1");
// 只更改文本，HTML 不解析，同时去除空格和换行
h1.innerText = "<h2>2020-05-05</h2> ABC";
</script>

// 输出结果
<h2>2020-05-05 ABC</h2>

3.3 element.attribute 改变元素属性值

这里的 attribute 是代词，具体要看元素有什么属性，比如 a 链接就有 href 属性，所以使用的时候需要用 element.href 来改变。

<div>
<a href="https://www.163.com">网址</a>
</div>

<script>
var a = document.querySelector("a");
a.href = "https://www.qq.com";
</script>

3.4 element.setAttribute 改变元素属性值

还可以通过 element.setAttribute 方法来改变元素属性值

element.setAttribute(attribute, value)

attribute：属性名
value：属性值

<div>
<a class="hightlight" href="https://www.163.com">网址</a>
</div>

<script>
var a = document.querySelector("a");
a.setAttribute("href", "https://www.qq.com");
// 用 .属性方法更改 class 属性使用 className
// 注意空格，这里是增加一个class
a.className += " hidden";
// 用 setAttribute 更改 class 属性直接用 class
// 也可以直接写上两个属性
a.setAttribute("class", "hightlight hidden");
</script>

常用元素属性

innerText
innerHTML
src
href
id, alt, title

3.5 element.hasAttribute

通过 element.hasAttribute 判断元素是否有指定属性

<a href="index.php" data-index="1">123</a>
<script>
var d = document.querySelector("a");
// 返回 true
console.log(d.hasAttribute("href"));
</script>

3.6 element.removeAttribute

<a href="index.php" data-index="1">123</a>
<script>
var d = document.querySelector("a");
d.removeAttribute("data-index");
</script>

3.7 style.property 修改样式

使用元素中的 style 属性可以修改该元素的样式。如 a.style.fontSize，a.style.display。修改的样式直接作用在行内CSS样式中，

修改样式的属性名需要改写，将横杠从CSS属性名中去除，然后将横杠后第一个字母大写，如：background-color 写成 backgroundColor
属性值都是字符串，设置时必须包括单位

<div>
<a href="https://www.163.com">网址</a>
</div>

<script>
var a = document.querySelector("a");
a.style.fontSize = "24px";
</script>

控制元素隐藏与显示
// visibility属性 visible 表示元素是可见的 hidden 表示元素是不可见的
// object.style.visibility="值"
// display属性 none 表示此元素不会被显示 block 表示此元素将显示为块级元素，此元素前后会带有换行符
// object.style.display="值"

通过类名切换背景

也可以通过

document.body.style.backgroundColor属性切换背景颜色

<style>
.cls {
background-color: coral;
}
</style>
<body>
<button>切换</button>
<script>
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
if (document.body.className == "") {
document.body.className = "cls";
} else {
document.body.className = "";
}
});
</script>
</body>

图片切换案例

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>图片切换</title>
       <script type="text/javascript">
           //数组的方式定义保存所有的图片的名称
           var images = [
               "img/1.jpg",
               "img/2.jpg",
               "img/3.jpg",
               "img/4.jpg",
               "img/5.jpg"];

           var index = 0;

           //声明一个变量保存定时器
           var timer = null;





           //加载函数
           window.onload = function(){

               //获取图片标签调用src重新赋值
               var oImg = document.querySelector("img");




               //封装一个函数保存下一张的代码
               function next(){
                   index++;
                   if(index >= images.length){
                       index = 0;//归0
                   }
                   oImg.src = images[index];//0 1 2 3 4
                   console.log(index);
               }




               //手动点击下一张进行切换
               var nextBtn = document.getElementById("nextBtn");
               //设置点击事件
               nextBtn.onclick = function(){
                   next();
               };

               //手动点击上一张进行切换
               var backBtn = document.getElementById("backBtn");
               //设置点击事件
               backBtn.onclick = function(){
                   index--;
                   if(index < 0){
                       index = images.length-1;//归0
                   }
                   oImg.src = images[index];//0 1 2 3 4
                   console.log(index);
               };


               //自动切换的按钮
               var autoBtn = document.getElementById("autoBtn");
               autoBtn.onclick = function(){
                   window.clearInterval(timer);
                   //设置定时器
                   timer = window.setInterval(function(){
                       next();
                   },2000);
               };

               var closeBtn = document.getElementById("closeBtn");
               closeBtn.onclick = function(){
                   window.clearInterval(timer);
               }
           };


       </script>
   </head>
   <body>
       
       <img src="img/1.jpg" alt="" width="300" height="300">
       <hr>
       <button id = "backBtn">上一张</button>
       <button id="nextBtn">下一张</button>
       <button id="autoBtn">自动切换图片</button>
       <button id="closeBtn">关闭切换图片</button>

   </body>
</html>