一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者，可拜上将军也。
前言
JavaScript 之 DOM and BOM 操作
认识DOM
文档对象模型( Document Object Model),简称DOM,是W3c组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。
W3C定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式。
认识DOM树
DOM把以下内容都看作是对象
- 文档: 一个页面就是一个文档,DOM中用document表示
- 元素: 页面中的所有标签都是元素,DOM中用element表示
- 节点: 网页中所有的内容都是节点(标签,属性,文本,注释等),DOM中用node表示
DOM 获取元素方法合集
页面加载要从上往下,因为要先有标签,才能获取标签
- 获取Html元素
document.documentElement
// 获取html元素 var html=document.documentElement console.log(html) //html 元素对象
- 获取body元素
document.body
var body=document.body console.log(body)
- 根据ID获取
get 获取 element 元素 by 通过 => getElementById(“one”)
参数: id 是 大小写敏感 的字符串
返回一个特定的匹配ID的元素,如果找不到就返回 null
<div id="box"> 123 </div> let he = document.getElementById("box") console.log(he); // <div id="box">123</div> console.log(typeof he); // object
- 根据标签名获取
返回值是:获取过来的元素对象的集合 ,以伪数组的形式储存
获取指定的标签名：
document.getElementsByTagName("标签名")
获取某个元素(父元素)内部所有指定标签名的子元素：
父元素必须是单个对象(指明是哪一个元素对象),获取的时候不包括父元素自己
element.getElementsByTagName("标签名")
<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"> let ul = document.getElementsByTagName("ul") console.log(ul) // 返回的是一个元素列表，不是数组，不可以使用数组的内置方法 console.log(ul[0].getElementsByTagName("li")) // HTMLCollection(2) [li, li] let ol = document.getElementById("ol") console.log(ol.getElementsByTagName("li")) // HTMLCollection(4) [li, li, li, li] </script>
- 根据类名获取
document.getElementsByClassName("类名") // 返回类名元素对象集合
<div class="box"></div> <div class="box"></div> <div id="nav"></div> let box=document.getElementsByClassName("box") console.log(box); // HTMLCollection(2) [div.box, div.box]
- 根据选择器获取
有相同的元素时，选择第一个
document.querySelector('选择器')
<div class="box"></div> <div class="box"></div> <div id="nav"></div> <ul> <li>列表1</li> <li>列表2</li> </ul> let firstbox = document.querySelector('.box') console.log(firstbox) // <div class="box"></div> let nav=document.querySelector('#nav') console.log(nav) // <div id="nav"></div> let 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> let all =document.querySelectorAll(".box") console.log(all);// NodeList(2) [div.box, div.box] let lis = document.querySelectorAll("li") console.log(lis)// NodeList(2) [li, li]
