一：什么是dom
DOM是一种文档对象模型，同时也是用于html编程的接口，通过dom来 *** 作页面中的元素。当html页面被实现加载的时候，浏览器会创建一个dom，给文档提供了一种新的逻辑结构，并且可以改变内容和结构。
DOM是面向对象，并且定义了修改文档所需要的对象，各个对象之前的关系，我们可以也页面上的dom看成一个树状结构，通过js，对html文档进行添加排版，js要想访问html中的元素，就要通过对象模型来获得。
二：dom获取元素的方法
1.在html中，我们都知道网页是有很多标签组织起来的，但是这些标签的id是唯一的，我们只要通过id号就能找到对应的标签，然后进行 *** 作。
2.我们也可以通过名称获取元素，查找返回带有名称对象的集合。是用元素的name属性进行查询，但是由于name元素可能不是唯一值，所以返回是一个数组，并不是一个元素。
3.通过指定元素节点的属性来获取。
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准，能够访问和改变 HTML 文档的所有元素。
一、传统方式获取DOM
<body>
<div id="family">
<div class="father">
爸爸
<div class="son">儿子</div>
</div>
</div>
<div id="b">我是div</div>
<span>我是span</span>
<ul>
<li name="data-list" class="item-list">标签1</li>
<li name="data-list" class="item-list">标签2</li>
<li name="data-list" class="item-list">标签3</li>
<li name="data-list" class="item-list">标签4</li>
</ul>
<input type="text" name="account" id="account" value="admin">
<input type="password" name="password" id="password" value="admin">
</body>
</html>
根据id获取 getElementById
<script>
// 根据id获取
let family = document.getElementById('family');
console.log(family);
根据 css类选择器 获取 getElementsByClassName
// 根据 css类选择器 获取
// HTMLCollection
let item_list = document.getElementsByClassName('item-list');
console.log(item_list);
// console.log(item_list[0]);
//for of 遍历
for (const li of item_list) {
console.log(li);
}
根据属性名name获取 getElementsByName
// 根据属性名name获取
// NodeList可以用=> for each遍历
let data_list = document.getElementsByName('data-list');
console.log(data_list);
data_list.forEach(li => {
console.log(li);
});
根据标签名获取 getElementsByTagName
// 根据标签名获取
// HTMLCollection 用for of遍历
let lis = document.getElementsByTagName('li')
console.log(lis);
for (const li of lis) {
console.log(li);
}
</script>
根据id获取 querySelector( ’ # id名 ’ )
// 根据id获取
let family = document.querySelector('#family');
console.log(family);
根据 css类选择器 获取 querySelectorAll ( ’ . class标签’ )
// 根据 css类选择器 获取
// NodeList
let item_list = document.querySelectorAll('.item-list');
console.log(item_list);
// console.log(item_list[0]);
item_list.forEach(li => {
console.log(li);
});
根据属性名获取 querySelectorAll（ ’ [name] ’ ）
// 根据属性名获取
// NodeList
console.log(document.querySelectorAll('[name]'));
console.log(document.querySelectorAll('input[name]'));
console.log(document.querySelector('input[name=account]'));
console.log(document.querySelector('input[name=password]'));
let data_list = document.querySelectorAll('[name=data-list]');
console.log(data_list);
data_list.forEach(li => {
console.log(li);
});
根据标签名获取 querySelectorAll（’ 标签名 '）
// 根据标签名获取
// NodeList
let lis = document.querySelectorAll('li');
console.log(lis);
lis.forEach(li => {
console.log(li);
});
<body>
<div id="family">
<div class="father">
爸爸
<div class="son">儿子</div>
</div>
</div>
<div id="b">我是div</div>
<!--兄弟啊 想你啦-->
<span>我是span</span>
<ul>
<li name="data-list" class="item-list">李昊哲</li>
<li name="data-list" class="item-list">李胜龙</li>
<li name="data-list" class="item-list">大美丽</li>
<li name="data-list" class="item-list">小可爱</li>
</ul>
<input type="text" name="account" id="account" value="admin">
<input type="password" name="password" id="password" value="admin">
</body>
返回元素的父节点parentNode
返回元素的父元素parentElement
let son = document.querySelector('.son');
console.log(son);
// 返回元素的父节点
console.log(son.parentNode);
// 返回元素的父元素
console.log(son.parentElement);
返回元素的一个子节点的数组 包含文本节点和注释节点 childNodes
返回元素的子元素的集合 children
let family = document.querySelector('#family');
// NodeList 返回元素的一个子节点的数组 包含文本节点和注释节点
console.log(family.childNodes);
// HTMLCollection 返回元素的子元素的集合
console.log(family.children);
获取标签内第一个元素的文本内容 firstElementChild
// 获取ul标签第一个元素的文本内容
console.log(ul.firstElementChild);
console.log(ul.firstElementChild.innerText);
console.log(ul.firstChild);
获取兄弟标签
元素后紧跟的节点 nextSibling
返回下一个html内容 nextElementSibling
nextSibling 属性与 nextElementSibling 属性的差别：
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
nextElementSibling 属性为只读属性。
nextElementSibling 属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。
// 获取兄弟标签
let b = document.querySelector('#b');//读取b标签
console.log(b.nextSibling)//元素后紧跟的节点
console.log(b.nextElementSibling)//返回下一个html内容
innerText和innerHTML属性的区别
相同点：
都是设置元素内部的内容。
不同点：
innerHTML 会把后面的“字符串”当做一段HTML代码解释并执行。
innerText 即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。
<body>
<p id="bilibili_text"></p>
<p id="bilibili_html"></p>
<p id="csdn_text"></p>
<p id="csdn_html"></p>
</body>
</html>
<script>
// 设置div的内容
// 第一步:获取div对象
let bilibili_text = document.querySelector('#bilibili_text');
let bilibili_html = document.querySelector('#bilibili_html');
let csdn_text = document.querySelector('#csdn_text');
let csdn_html = document.querySelector('#csdn_html');
// 页面显示
bilibili_text.innerText = '李昊哲-小课';
bilibili_html.innerHTML = '李昊哲-小课';
csdn_text.innerText = '李昊哲-小课';
csdn_html.innerHTML = '李昊哲-小课';
// 页面获取
console.log(bilibili_text);
console.log(bilibili_html);
console.log(csdn_text);
console.log(csdn_html);
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）