绿叶学习网笔记整理

最新推荐文章于 2024-06-10 21:57:03 发布

weixin_45293422

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量889

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_45293422/article/details/123627780

版权

DOM基础

（1）DOM对象

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。

DOM操作，可以简单理解成“元素操作”

（3）DOM结构

DOM采用的是“树形结构”，用“树节点”形式来表示页面中的每一个元素。
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<body>
    <h1>绿叶学习网</h1>
    <p>绿叶学习网是一个……</p>
    <p>绿叶学习网成立于……</p>
</body>
</html>
在这棵树上，html元素是树根，也叫根元素。

利用这种简单的 家谱关系 我们可以把各节点之间的关系清晰地表达出来，更好地给每一个元素进行定位，以便让我们找到想要的元素。

每一个元素就是一个节点，而每一个节点就是一个对象。

我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。

（3）节点类型

DOM节点总共有12种，常见的只有三种：

（1）元素节点

（2）属性节点

（3）文本节点

JavaScript会把元素、属性以及文本当作不同的节点来处理

节点跟元素是不一样的概念，节点是包括元素的。

使用nodeType属性来判断一个节点的类型：

节点类型 nodeType值
元素节点 1
属性节点 2
文本节点 3

节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

节点类型，注意：

（1）一个元素就是一个节点，这个节点称之为“元素节点”。

（2）属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。

（3）只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点（它们求子多年，但仍未如愿）。

（4）获取元素

六种获取指定元素的方法：

（1）getElementById()
（2）getElementsByTagName()
（3）getElementsByClassName()
（4）querySelector()和querySelectorAll()
（5）getElementsByName()
（6）document.title和document.body

getElementById()

通过id来选中元素，get element by id（通过id来获取元素）

语法：document.getElementById("id名")
 window.onload = function () //将id为“div1”的元素的颜色设置为红色
 {
     var oDiv = document.getElementById("div1");
     oDiv.style.color = "red";
 }
getElementById()获取的是一个DOM对象，我们在给变量命名的时候，习惯性地以英文“o”开头，以便跟其他变量区分开来，让我们一眼就看出来这是一个DOM对象。

window.onload = function () 
{
    ……
}
上面表示在整个页面加载完成后执行的代码块。

浏览器是从上到下解析一个页面的。

getElementsByTagName()

通过标签名来选中元素，get elements by tag name（通过标签名来获取元素）

getElementsByTagName()类似于CSS中的“元素选择器”。

getElementsByTagName()获取的是多个元素，是一个集合，所以需要加“s”，Elements。

document. getElementsByTagName("标签名")
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
<li>React</li>
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
//*************
var oLi = document.getElementsByTagName("li");
//上述两个得到的结果不同，第一种是获取所有的标签为“li”元素，第二个是获取id为“list”的元素下的标签名为“li”的元素
准确来说，getElementsByTagName()方法获取的是一个“类数组”（也叫伪数组），这不是真正意义上的数组。为什么这样说呢？因为我们只能使用到数组的length属性以及下标的形式，但是对于push()等方法是没办法在这里用的，小伙伴试一下就知道了。记住，类数组只能用到两点：length属性；下标形式。

getElementsByClassName()

通过class来选中元素，get elements by class name（通过类名来获取元素）

getElementsByClassName()类似于CSS中的class选择器。

document. getElementsByClassName("类名")

跟getElementsByTagName相似，getElementsByClassName()获取的也是一个类数组。获取的是多个元素，Element需要加s

querySelector()和querySelectorAll()

用CSS选择器的语法来获取所需要的元素。

document.querySelector("选择器");
document.querySelectorAll("选择器");

querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。

举例：
document.querySelector("#main")
document.querySelector("#list li:nth-child(1)") //选取id为list的元素下的第1个元素
document.querySelectorAll("#list li")
document.querySelectorAll("input:checkbox")
对于id选择器来说，由于页面只有一个元素，建议用getElementById()

因为getElementById()方法效率更高，性能也更快。

document.querySelectorAll("选择器"); 获取结果也是一个类数组

getElementsByName()

对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。

document.getElementsByName("name名")

getElementsByName()获取的也是一个类数组

getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取

ame(“name名”)`

getElementsByName()获取的也是一个类数组

getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取

weixin_45293422

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绿叶学习网笔记整理

DOM基础（1）DOM对象DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。DOM操作，可以简单理解成“元素操作”（3）DOM结构DOM采用的是“树形结构”，用“树节点”形式来表示页面中的每一个元素。<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title></title>&lt
复制链接

扫一扫