文章目录
一、什么是DOM？二、获取元素的方式1.系统提供的方法2.系统提供的直接获取的方式3.通过关系获取4.获取自己是父元素中的第几个子元素/节点一、什么是DOM？
DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口
它把文档中的代码翻译成一个对象模型
在这个模型中 所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象 统称节点对象。
二、获取元素的方式
1.系统提供的方法
返回值：看Element有没有加s，有则返回包含找到的所有元素的数组，没找到则返回空数组；没有加s则返回找到的第一个元素，没找到则为null
<div id="div_1" class="div1"><div class="div2"></div></div><div class="div1"></div><input type="text" name="1"><input type="text" name="1"><script>console.log(document.getElementById('div_1'))console.log(document.getElementsByClassName('div1'))console.log(document.getElementsByTagName('div'))console.log(document.getElementsByName('1'))console.log(document.querySelector('div .div2'))console.log(document.querySelectorAll('div'))console.log(document.getElementById('div_3'),document.getElementsByClassName('div3'))</script>
2.系统提供的直接获取的方式
3.通过关系获取
<div id="div_1" class="div1"><div class="div2"></div></div><div id="div_2"></div><div class="div1"></div><script>console.log(document.getElementsByClassName('div2')[0].parentElement)console.log(document.getElementsByClassName('div2')[0].parentNode)console.log(document.getElementsByClassName('div2')[0].parentElement.parentElement.parentElement.parentElement)console.log(document.getElementsByClassName('div2')[0].parentNode.parentNode.parentNode.parentNode)console.log(document.getElementById('div_1').children)console.log(document.getElementById('div_1').childNodes)console.log(document.getElementById('div_2').nextSibling)console.log(document.getElementById('div_2').nextElementSibling)console.log(document.getElementById('div_2').previousSibling)console.log(document.getElementById('div_2').previousElementSibling)</script>
补充：
元素和节点的区别：
元素：即html文档里面，所有的标签都可以称之为元素，比如说<div>、<p>等。
节点：在 HTML DOM （文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）
注释是注释节点。
它们的关系是：元素是节点中的一种，称为元素节点，但元素节点中可以包含很多的节点。
parentElement和parentNode区别::
区别在于html标签的parentNode为document,parentElement则没有，返回null；
4.获取自己是父元素中的第几个子元素/节点
<div id="div_1" class="div1"><div class="div2"></div></div><div id="div_2"></div><div class="div1"></div><script>Object.prototype.indexOf_1=function () {let parentChildren=this.parentElement.children; //获取调用者的父元素的子元素们 for(let i=0;i<parentChildren.length;i++){ //循环上一步返回的数组if(parentChildren[i]==this){ //判断哪个子元素是调用者return i //返回调用者在父元素的子元素集的下标}} }let div2=document.getElementById('div_2')console.log(div2.indexOf_1())
