JavaScript编程基础(四)DOM基本操作 原创 阁主 2023-08-08 15:44:52 阅读 662 次 评论 0 条 摘要:继续上次的JavaScript编程基础(三)继续学习,简单记录学习PHP中文网23期JavaScript基础知识,内容包括:获取 DOM 元素、获取表单数据、遍历 DOM、增删改(写操作)、指定位置插入 ## 获取 DOM 元素 1. `querySelectorAll():`一组: 2. `querySelector()`:一个中的第一个: ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308041019524197777.png) ```JavaScript 获取DOM元素 item1 item2 item3 item4 item5 item6 ``` ## 获取表单数据 1. 表单: `document.forms.id` 2. 控件: `form.name/id` ```JavaScript 表单元素的获取 用户登录 邮箱: 密码: 提交 ``` ## 快捷方法 1. `body` : `document.body` 2. `head` : `document.head` 3. `title` : `document.title` 4. `html` : `document.documentElement` 5. `url` : `document.URL` 6. `window` : `document.defaultView` 7. `cookie` : `document.cookie` 8. `script` : `document.scripts` 9. `styleSheets`: `document.styleSheets` 10. `doctype`: `document.doctype` 部分用法: ```JavaScript // body console.log(document.querySelector("body")); console.log(document.body); console.log(document.querySelector("body") == document.body); // head console.log(document.head); // title console.log(document.title); // html console.log(document.html); // Error console.log(document.documentElement); // html 根元素 console.log(document.doctype); ``` ## 遍历 DOM 1. `children`: 元素类型子节点 2. `firstElementChild`: 第一个子元素 3. `lastElementChild`: 最后一个子元素 4. `nextElementSibling`: 下一个兄弟元素 5. `previousElementSibling`: 前一个兄弟元素 6. `parentElement`: 父元素 7. `contains()`: 是否是后代 ```JavaScript DOM遍历 item1 item2 item3 item4 item5 item6 ``` ## 增删改(写操作) 1. `createElement()`: 创建新元素 2. `createDocumentFragment()`: 创建文档片断 3. `append()`: 追加新元素 4. `before()`: 在前面追加 5. `after()`: 在后面追加 6. `cloneNode()`: 克隆节点 7. `replaceChild()`: 替换元素 8. `remove()`: 移除元素 ```JavaScript 增删改 ``` ## 元素内容 1. `textContent`: 全部内容(包括 js,css,隐藏内容) 2. `innerText`: 返回已渲染(可见)内容 3. `innerHTML`: 替换元素内容(html) 4. `outerHTML`: 替换元素自身(html) ```JavaScript 内容 Hello world开心的一天 ``` ## 指定位置插入 - 插入位置 1. `beforebegin`:元素自身的前面 2. `afterbegin`:插入元素内部的第一个子节点之前 3. `beforeend`:插入元素内部的最后一个子节点之后 4. `afterend`:元素自身的后面 ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308131744548347107.png) - API 方法 1. `insertAdjacentElement()`:指定位置插入**元素** 2. `insertAdjacentText()`: 指定位置插入**文本**节点 3. `insertAdjacentHTML()`: 指定位置插入**元素节点**(DOMString) ```JavaScript 指定位置插入 item1 item2 item3 item4 item5 item6 ``` 本文地址:https://www.mainblog.cn/329.html 版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处! 免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。 PREVIOUS:JavaScript编程基础(三)访问器属性、常用字符串与数组方法、构造函数、类 NEXT:JavaScript编程基础(五)细说事件与实战之经典计算器 文章导航