JavaScript DOM应用

柚屿☆

已于 2022-06-30 14:04:15 修改

阅读量175

点赞数 2

文章标签： javascript 前端 html css

于 2022-06-30 14:03:11 首次发布

本文链接：https://blog.csdn.net/qq_53335914/article/details/125538767

版权

概念介绍

DOM 是 JavaScript 里的一个重要概念，全称是Document Object Model,即文档对象模型， JavaScript 有“一切皆对象”的说法，对于“文档”以及“对象”，大家都不陌生了，那 DOM 里面的“model”则是将文档的内容抽象成一个节点树模型，这样，程序语言可以对这个“树模型”进行操作，DOM同时也变成了一个与系统平台和程序语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。

DOM基础

DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似Window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。

1.节点

加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。

从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。head标签是html标签的子标签，meta和title标签之间是兄弟关系。如果把每个标签当做一个节点的话，那么这些节点组合成了一棵节点树。
注：后面我们经常把标签称作为元素，是一个意思。

2.节点种类

示例：

<div title="属性节点">测试Div</div>

节点分为三类：

元素节点：其实就是标签，即：<div></div>
文本节点：其实就是标签内的纯文本，即：测试Div
属性节点：其实就是标签的属性，即：title=“属性节点”

3.查找元素

方法	说明
getElementById()	获取特点ID元素的节点
getElementsByTagName()	获取相同元素的节点列表
getElementsByName()	获取相同名称的节点列表
getAttribute()	获取特点元素节点属性的值
setAttribute()	设置特点元素节点属性的值
removeAttribute()	移除特定元素节点属性

(1)getElementById()

getElementById()方法，接受一个参数：要获取的元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。
示例：

var box=document.getElementById('box');           //获取id为box的元素节点
alert(box);

元素节点属性

属性	说明
tagName	获取元素节点的标签名
innerHTML	获取元素节点里的内容(即纯文本)，非W3C DOM规范

document.getElementById('box').tagName;         //获取这个元素节点的标签名 输出DIV
document.getElementById('box').innerHTML;       //获取这个元素节点里面的文本（包含HTML标签）

HTML属性的属性

属性	说明
id	元素节点的id名称
title	元素节点的title属性值
style	CSS内联样式属性值
className	CSS元素的类

window.onload=function(){
    var box=document.getElementById('box');
    alert(box.id);                   //获取这个元素节点id属性的值，注意；不是属性节点
    alert(box.title);                //获取title属性的值
    alert(box.style);              //获取style属性对象
    alert(box.style.color);     //获取style属性对象中的color属性的值
    alert(box.className);   //获取class属性的值   
};

(2)getElementsByTagName()

getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。该方法需要一个参数：HTML标签的名称。

document.getElementsByTagName('*');              //获取所有元素

(3)getElementsByName()

getElementsByName()方法可以获取相同名称（name）的元素，返回一个对象数组HTMLCollection(NodeList)。该方法需要一个参数：HTML标签的name属性的值。

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta/>
  <title>DOM基础</title>  
 </head>
 <body>
    <div  id="box" title="标题" class="pox" style="color:red">测试Div</div>
    <input name="test" type="checkbox" value="测试" checked="checked">
          <ul>
       <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
 </body>
 <script type="text/javascript" src="demo.js"></script>
</html>

JS代码:

window.onload=function(){
      var input=document.getElementsByName('test')[0];
      alert(input.value);                      //输出：测试
      alert(input.checked);                 //输出：true
};

(4)getAttribute()

getAttribute()方法将获取元素中某个属性的值。它和直接使用属性获取属性值的方法有一定区别。

window.onload=function(){
   var box=document.getElementById('box');
   alert(box.bbb);                            //自定义，W3C不合法，只有IE浏览器支持
   alert(box.getAttribute('style'));    //非IE返回的是style字符串，IE返回的是对象，这里有个不兼容的问题
   alert(box.getAttribute('bbb'));     //自定义，所有浏览器都兼容
};

(5)setAttribute()

setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。

window.onload=function(){
   var box=document.getElementById('box');
   box.setAttribute('title','标题');                     //创建一个属性和属性值
   box.setAttribute('align','center');                    //设置居中
   box.setAttribute('bbb','ccc');                       //设置自定义的属性和值
};

(6)removeAttribute()

removeAttribute()方法可以移除HTML属性。

window.onload=function(){
   var box=document.getElementById('box');
   box.removeAttribute('style');        //移除属性
};

柚屿☆

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM应用

DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似Window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。......
复制链接

扫一扫