网站首页编程语言正文

DOM简介及获取元素方法属性总结

作者：1900's 88 keys 更新时间： 2022-01-16 编程语言

什么是DOM

DOM，全称Documnet Object Model文档对象模型。

文档树

在这里插入图片描述

获取元素节点（通过document对象调用）

浏览器为我们提供的文档节点对象Documne,这个对象是window属性，可以直接在页面中直接使用，文档节点代表的是整个网页##

getElementByid()

getElementByid("id")通过根据ID属性获取一个节点元素

    <div id="div">我是div</div>
    <script>
        var div = document.getElementById("div");
        console.log(div);
    </script>

在这里插入图片描述

getElementsByTagName()

getElementsByTagName("Element标签名")通过标签名获取一组元素节点对象
这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
可以通过下标的形式访问里面的内容
通过length方法会返回伪数组的长度

    <ul>
        <li>江流</li>
        <li>心猿</li>
        <li>木龙</li>
        <li>刀圭</li>
        <li>意马</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");//获取所有的li
        console.log(lis);//打印lis
        console.log(lis.length);//打印lis的长度    
    </script>

在这里插入图片描述

getElementsByName()

getElementsByName("name")通过name属性获取一组元素节点对象
这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
可以通过下标的形式访问里面的内容
通过length方法会返回伪数组的长度

    <div name="xiyou">西游记</div>
    <ul>
        <li name="xiyou">江流</li>
        <li name="xiyou">心猿</li>
        <li name="xiyou">木龙</li>
        <li name="xiyou">刀圭</li>
        <li name="xiyou">意马</li>
    </ul>
    <script>
        var xiyous = document.getElementsByName("xiyou");//获取所有name="xiyou"的元素
        console.log(xiyous);//打印xiyous
        console.log(xiyous.length);//打印xiyous的长度
    </script>

在这里插入图片描述

事件

事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口。
可以在事件对应属性中设置js代码，当事件触发时，这些代码将会执行。

常见的 HTML 事件

onclick

用户点击了HTML元素

<button id="button" onclick="alert('点我干嘛？')">我是button</button>

在这里插入图片描述

onmouseover

用户把鼠标移动到 HTML 元素上

<button id="button" onmouseover="alert('点我干嘛？')">我是button</button>

在这里插入图片描述

onmouseout

用户把鼠标移开 HTML 元素

onchange

HTML 元素已被改变

onkeydown

用户按下键盘按键

onload

浏览器已经完成页面加载
通常用为window绑定一个onload事件,就可以把js代码放在里面，然后把script代码放在在head标签前面，便于维护和管理代码。

 window.onload = function(){
		代码块...
	};

绑定事件

可以为HTML元素的对应事件绑定处理函数的形式来响应事件
这样当事件被触发时，其对应的函数将会被调用
例如以上面的onclick为例：

 <button id="btn">点我</button>
 <script>
     var btn = document.getElementById("btn");//获取按钮对象
     console.log(btn);
     btn.onclick = function () {//绑定单击事件
         alert('叫你点你就点，见不见呀？');
     }
 </script>

在这里插入图片描述

获取元素节点的子节点（通过具体的元素节点调用）

getElementsByTagName()

getElementsByTagName("子元素名") ，这是一个方法,该方法通过具体元素节点调用时，会返回当前节点的指定标签名后代节点。（注意：需要分清上面被document调用时的区别）

    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var xiyou = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var lis = xiyou.getElementsByTagName('li');//通过ul元素调用查询li
        console.log(lis);//打印lis
        console.log(lis.length);//打印lis的长度
    </script>

在这里插入图片描述

childNodes

childNodes是一个属性，表示当前节点的所有子节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标准标签间空白也会当成文本节点
在IE8及以下的浏览器中，不会将空白文本当成子节点

    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ulChilds = ul.childNodes;//查询ul下所有的子节点
        console.log(ulChilds);//打印ulChilds
        console.log(ulChilds.length);//打印ulChilds的长度
    </script>

在这里插入图片描述

children

children属性可以获取当前元素的所有子元素（注意：是子元素，上面childNodes是子节点）
可以弥补上面childNodes的缺点，即不包括空白文本

    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ulChilds = ul.children;//查询ul下所有的子元素
        console.log(ulChilds);//打印ulChilds
        console.log(ulChilds.length);//打印ulChilds的长度
    </script>

在这里插入图片描述

firstChild

firstChild是一个属性，表示当前节点的第一个子节点(包括空白文本)

    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ulFirstChild = ul.firstChild;//查询ul下第一个子节点
        console.log(ulFirstChild);//打印ulFirstChild
    </script>

在这里插入图片描述

firstElementChild

firstElementChild属性获取当前元素的第一个子元素（不包含空白文本）
不支持IE8及以下的浏览器

    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ulfirstElementChild = ul.firstElementChild;//查询ul下第一个子元素点
        console.log(ulfirstElementChild);//打印ulfirstElementChild
    </script>

在这里插入图片描述

lastChild

lastChild是一个属性,表示当前节点的最后一个子节点(包括空白文本)

    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ullastChild = ul.lastChild;//查询ul下最后一个子节点
        console.log(ullastChild);//打印ullastChild
    </script>

在这里插入图片描述

lastElementChild

lastElementChild 属性获取当前元素的最后一个子元素（不包含空白文本）
不支持IE8及以下的浏览器

    <ul id="xiyou">
        <li >江流</li>
        <li >心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var ul = document.getElementById("xiyou");//获取id="xiyou"的ul元素
        
        var ullastElementChild = ul.lastElementChild;//查询ul下最后一个子元素点
        console.log(ullastElementChild);//打印ullastElementChild
    </script>

在这里插入图片描述

获取父节点和兄弟节点（通过具体的节点调用）

parentNode

parentNode属性，查询当前节点的父元素

    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liParen = li.parentNode;//查询li的父节点
        console.log(liParen);//打印liParen
     </script>

previousSibling

previousSibling属性，查询当前节点的前一个兄弟节点(包括空白文本节点)

    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liPrevious = li.previousSibling;//查询li的前一个节点
        console.log(liPrevious);//打印liPrevious
    </script>

在这里插入图片描述

previousElementSibling

previousElementSibling属性，查询当前节点的前一个兄弟元素(不包括空白文本)

    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liPrevious = li.previousElementSibling;//查询li的前一个元素
        console.log(liPrevious);//打印liPrevious
    </script>

在这里插入图片描述

nextSibling

nextSibling属性，查询当前节点的后一个兄弟节点(包括空白文本)

    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liNext = li.nextSibling;//查询li的前一个节点
        console.log(liNext);//打印liNext
    </script>

在这里插入图片描述

nextElementSibling

nextElementSibling属性，查询当前节点的后一个兄弟节点(不包括空白文本)

    <ul>
        <li >江流</li>
        <li id="monkey">心猿</li>
        <li >木龙</li>
        <li >刀圭</li>
        <li >意马</li>
    </ul>
    <script>
        var li = document.getElementById("monkey");//获取id="monkey"的元素
        
        var liNext = li.nextElementSibling;//查询li的后一个元素
        console.log(liNext);//打印liNext
    </script>

在这里插入图片描述

HTML5新增的获取方式（通过document对象调用）

querySelector()

querySelector("选择器名")方法用于返回指定选择器的第一个元素对象
IE8支持该方法，IE7及以下不支持

    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龙</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意马</li>
    </ul>
    <script>
        var liId = document.querySelector("#monkey");//获取id="monkey"的元素
        var liClass = document.querySelector(".xiyou")//获取第一个class="xiyou"的元素
        var liElement = document.querySelector("li")//获取第一个li的元素
        console.log("通过ID选择器：",liId);
        console.log("通过Class选择器：",liClass);
        console.log("通过Element选择器：",liElement);
    </script>

在这里插入图片描述

querySelectorAll()

querySelector("选择器名")方法用于返回指定选择器的所有元素对象集合
该方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
- IE8支持该方法，IE7及以下不支持

    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龙</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意马</li>
    </ul>
    <script>
        var liClasses = document.querySelectorAll(".xiyou")//获取所有class="xiyou"的元素
        var liElements = document.querySelectorAll("li")//获取所有li的元素
        console.log("通过Class选择器：",liClasses);
        console.log("通过Element选择器：",liElements);
    </script>

在这里插入图片描述

getElementsByClassName()

getElementsByClassName("class名")方法，用于通过类名来获取某些元素的集合
该方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
IE8及以下版本不支持该方法，IE8可以使用querySelectorAll()替代该方法

    <ul>
        <li class="xiyou" >江流</li>
        <li id="monkey">心猿</li>
        <li class="xiyou" >木龙</li>
        <li class="xiyou" >刀圭</li>
        <li class="xiyou" >意马</li>
    </ul>
    <script>
        var liClasses = document.getElementsByClassName("xiyou")//获取所有class="xiyou"的元素
        console.log("通过Class选择器：",liClasses);
    </script>

在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_45660621/article/details/121514863

上一篇：对象的绑定、滚轮滚动事件及键盘事件
下一篇：meteor node node-gyp bindings.

网站首页编程语言正文

DOM简介及获取元素方法属性总结

目录

什么是DOM

文档树

获取元素节点（通过document对象调用）

getElementByid()

getElementsByTagName()

getElementsByName()

事件

常见的 HTML 事件

onclick

onmouseover

onmouseout

onchange

onkeydown

onload

绑定事件

获取元素节点的子节点（通过具体的元素节点调用）

getElementsByTagName()

childNodes

children

firstChild

firstElementChild

lastChild

lastElementChild

获取父节点和兄弟节点（通过具体的节点调用）

parentNode

previousSibling

previousElementSibling

nextSibling

nextElementSibling

HTML5新增的获取方式（通过document对象调用）

querySelector()

querySelectorAll()

getElementsByClassName()

相关推荐

网站首页 编程语言 正文

DOM简介及获取元素方法属性总结

目录

什么是DOM

文档树

获取元素节点（通过document对象调用）

getElementByid()

getElementsByTagName()

getElementsByName()

事件

常见的 HTML 事件

onclick

onmouseover

onmouseout

onchange

onkeydown

onload

绑定事件

获取元素节点的子节点（通过具体的元素节点调用）

getElementsByTagName()

childNodes

children

firstChild

firstElementChild

lastChild

lastElementChild

获取父节点和兄弟节点（通过具体的节点调用）

parentNode

previousSibling

previousElementSibling

nextSibling

nextElementSibling

HTML5新增的获取方式（通过document对象调用）

querySelector()

querySelectorAll()

getElementsByClassName()

相关推荐

网站首页编程语言正文