企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] # DOM * [ ] 浏览器对象window ``` 直接使用window对象``` * [ ] 文档对象document ```window.document 或 document``` * [ ] 节点对象NodeElement ``` Live Node = document.getElementById("id") Live Node List = document.getElementsByClassName("class") Live Node List = document.getElementsByName("name") Live Node List = document.getElementsByTagName("tagname") Static Node = document.querySelector("selector") Static Node List = document.querySelectorAll("selector") ``` ## 案例1:获取节点属性 | 属性 | 说明 | | --- | --- | | nodeName | 节点的名称(标签名) | | ~~nodeType~~ | 节点的类型(NodeElement值为1)× | | ~~nodeValue~~ | 节点的值 × 并非value值 | | parentNode | 节点的父元素 | | childNodes | 节点的子元素列表(包含空白节点) | | firstChild | 节点的第一个子元素(可能会引用到空白节点) | | lastChild | 节点的最后一个子元素 | | previousSibling | 节点前一个兄弟 | | nextSibling | 节点后一个兄弟 | | attributes | 节点属性列表(name=value形式) | ![](https://img.kancloud.cn/35/ba/35bad55900bffec4ce7200c071f152c4_287x161.png) ![](https://img.kancloud.cn/13/87/13876d24d685bee5cea1ceab64e129c0_371x181.png) ## 案例2:添加不同节点 ![](https://img.kancloud.cn/7d/fd/7dfd13cd215be263b63b83e46d1697f1_432x398.gif) > 试一试:增加兄弟节点(在某个节点之前) ``` ele.parentNode.insertBefore(newEle,ele); ``` ## 案例3:批量添加节点 ![](https://img.kancloud.cn/6f/2f/6f2fc28ad8c1ca8ba940d66c8ffbbf7f_432x398.gif) ## 案例4:删除节点 ``` ele.parentNode.removeChild(ele); ``` ![](https://img.kancloud.cn/42/30/423069be8c5120b76acc13699bfd709c_432x398.gif) ## 案例5:节点克隆与替换(了解) ``` ele.parentNode.append(ele.cloneNode(true)); ele.parentNode.replaceChild(newEle,ele); ``` ![](https://img.kancloud.cn/bb/8e/bb8e40414f34be9faf603c0181886b92_428x388.gif) # BOM ## 案例1:网页跳转 ![](https://img.kancloud.cn/6f/cc/6fcc8d04337452af9fabfab90bd404b6_890x588.gif) ## 案例2:打开/关闭窗口 ``` myWindow = window.open("https://www.baidu.com","baidu","width=800,height=600,top=200,left=600") myWindow.close(); ``` > JavaScript只能关闭自己打开的窗口,不能控制已经打开的其他窗口 ![](https://img.kancloud.cn/72/bc/72bc3ed4f0750df26e1218f2d2809fe0_1112x720.gif) [链接:http://www.cac.gov.cn/2022-09/08/c_1664260384702890.htm](http://www.cac.gov.cn/2022-09/08/c_1664260384702890.htm) ![](https://img.kancloud.cn/8e/21/8e2103f175f775f51e002b7f0890fdd2_1144x710.png) ![](https://img.kancloud.cn/66/0e/660e8b9b56b7743946e885453a30efe9_974x795.png) ## 案例3:交互框 ![](https://img.kancloud.cn/33/69/33699dcfcfb9524003a94bbc3ef1e52b_498x339.gif) ### 试一试:自动跳转 ![](https://img.kancloud.cn/27/1d/271d65dd799299ba625f9400078e3c65_666x406.gif) ## 案例4:网页打字机 ![](https://img.kancloud.cn/49/78/497867d58ec455ad02061009173516c8_666x406.gif) ### 试一试:定时跳转 ![](https://img.kancloud.cn/48/ca/48cac20fcb98ea5021e4d71d9c9e3ae5_580x360.gif) ## 案例5:控制窗口历史记录 ``` window.history.forward(); window.history.back(); window.history.go(index); ``` ![](https://img.kancloud.cn/79/e7/79e7aebeb0008942b4b46154892096f4_666x406.gif) ## 案例6:自动记录信息(刷新网页不丢失) ``` document.cookie = cname+"="+cvalue+";expires="+new Date().toGMTString();"; var cookies = document.cookie.split(';'); ``` ![](https://img.kancloud.cn/39/ce/39ce0db69db495b9a6e5192ac00fa751_450x402.gif)