🍓什么是DOM
文档对象模型( Document Object Model),简称DOM,是W3c组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口
W3C定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式
🍓DOM树
文档:一个页面就是一个文档,DOM中用document表示
元素:页面中的所有标签都是元素,DOM中用element表示
节点:网页中所有的内容都是节点(标签,属性,文本,注释等),DOM中用node表示
DOM把以上内容都看作是对象
🍓获取元素
🐇注意:
注意:页面加载要从上往下,因为要先有标签,才能获取标签
🐇根据ID获取
get 获取 element 元素 by通过 驼峰命名法
参数:id是大小写敏感的字符串
返回一个特定的匹配ID的元素,如果找不到就返回null
<div id="box">
123
</div>
</body>
<script type="text/javascript">
var he = document.getElementById("box");
console.log(he);//<div id="box">123</div>
console.log(typeof he);//object
🐇根据标签名获取
一
document.getElementsByTagName("标签名")
//返回值是:获取过来的元素对象的集合 ,以伪数组的形式储存
<ul>
<li>我是JavaScript1</li>
<li>我是JavaScript2</li>
<li>我是JavaScript3</li>
<li>我是JavaScript4</li>
<li>我是JavaScript5</li>
<li>我是JavaScript6</li>
</ul>
var list = document.getElementsByTagName("li");
console.log(list);//HTMLCollection(6) [li, li, li, li, li, li]
console.log(list[0]);//<li>我是JavaScript1</li>
//想要依次打印里面的元素对象可以采用遍历的形式
for(var i=0;i<list.length;i++){
console.log(list[i]);//6个li
}
注意: 不要忘记加s
//如果页面中只有一个li,返回的还是伪数组的形式
//如果页面中没有这个元素,返回的就是空的伪数组的形式
二
🐇获取某个元素(父元素)内部所有指定标签名的子元素
element.getElementsByTagName("标签名")
父元素必须是单个对象(指明是哪一个元素对象),获取的时候不包括父元素自己
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul><li>我是JavaScript1</li>
<li>我是JavaScript2</li>
</ul>
<ol id="ol">
<li>我是html1</li>
<li>我是html2</li>
<li>我是html3</li>
<li>我是html4</li>
</ol>
</body>
<script type="text/javascript">
//element.getElementsByTagName("标签名")
// var ol=document.getElementsByTagName("ol");
// console.log(ol[0].getElementsByTagName("li"));//HTMLCollection(4) [li, li, li, li]
var ol=document.getElementById("ol");
console.log(ol.getElementsByTagName("li"));//HTMLCollection(4) [li, li, li, li]
</script>
</html>
🐇根据类名获取
document.getElementsByClassName("类名")返回类名元素对象集合
<div class="box"></div>
<div class="box"></div>
<div id="nav"></div>
var box=document.getElementsByClassName("box")
console.log(box);//HTMLCollection(2) [div.box, div.box]
🐇根据选择器获取
document.querySelector('选择器'); 根据选择器返回第一个元素对象
里面的选择器要加符号.就像css里一样
<div class="box"></div>
<div class="box"></div>
<div id="nav"></div>
<ul>
<li>列表1</li>
<li>列表二</li>
</ul>
var firstbox=document.querySelector('.box')
console.log(firstbox)//<div class="box"></div>
var nav=document.querySelector('#nav')
console.log(nav)//<div id="nav"></div>
var li =document.querySelector("li");
console.log(li);//<li>列表1</li>
🐇 根据指定选择器返回所有元素对象集合
document.querySelectorAll("选择器") 根据指定选择器返回所有元素对象集合
<div class="box"></div>
<div class="box"></div>
<div id="nav"></div>
<ul>
<li>列表1</li>
<li>列表二</li>
</ul>
var all =document.querySelectorAll(".box")
console.log(all);//NodeList(2) [div.box, div.box]
var lis= document.querySelectorAll("li")
console.log(lis)//NodeList(2) [li, li]
🐇获取body元素
document.body
var body=document.body;
console.log(body);//body 里面有很多元素和方法
🐇获取html元素
document.documentElement
//获取html元素
var html=document.documentElement;
console.log(html);//html元素对象