DOM——页面文档对象模型 （2）
DOM
- 节点操作
- 5.1 节点概述
- 5.2 节点层级
- 1.父级节点
- 2.子节点
- 3.获取第一个元素和最后一个元素
- 新浪下拉菜单案例
- 4.兄弟节点
- 5.创建和添加节点
- 简单版留言发布案例
- 6.删除节点
- 删除留言案例
- 7.复制节点
- 动态生成表格案例
- 8.创建元素
节点操作
利用节点层级关系获取元素（父子兄弟节点关系）
5.1 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以被创建或者删除。
一般地，节点至少拥有node Type（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
■ 元素节点 nodeType 为 1
■ 属性节点 nodeType 为 2
■ 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）
节点操作主要操作元素节点
5.2 节点层级
利用DOM 树可以把节点划分为不同的层级关系，常见的是父子兄弟层级关系。
1.父级节点
node.parentNode 得到离元素最近的父节点
2.子节点
parentNode.childNode （标准）
<body><div><ul><li>小li1</li><li>小li2</li><li>小li3</li><li>小li4</li><li>小li5</li></ul></div><script>var ul = document.querySelector('ul');var lis = document.querySelectorAll('li');// 1.子节点 childNode 所有的子节点 包含元素节点、文本节点等console.log(ul.childNodes);</script>
</body>
text 是空格，文本元素
<body><div><ul><li>小li1</li><li>小li2</li><li>小li3</li><li>小li4</li><li>小li5</li></ul></div><script>var ul = document.querySelector('ul');var lis = document.querySelectorAll('li');// 1.子节点 childNode 所有的子节点 包含元素节点、文本节点等console.log(ul.childNodes);// 如果只想获得元素节点// ul.childNodes 是ul的子节点for (var i = 0; i < ul.childNodes.length; i++) {if (ul.childNodes[i].nodeType == 1) {// ul.childNode[i] 是元素节点console.log(ul.childNodes[i]);}}</script>
</body>
parentNode.children（非标准）
parentNode.children 是一个只读属性，返回所有的子元素节点。他只返回子元素节点，其余节点不会（重点）
3.获取第一个元素和最后一个元素
parentNode.firstChild 包含文本节点
firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点
parentNode.lastChild 包含文本节点
lastChild 返回最后一个子节点，包含所有的节点
parentNode.firstElementChild 只返回元素节点
parentNode.lastElementChild 只返回元素节点
注意：这两个方法有兼容性，IE9以上才支持
<body><ol><li>小li1</li><li>小li2</li><li>小li3</li><li>小li4</li></ol><script>var ol = document.querySelector('ol');console.log(ol.firstChild);console.log(ol.lastChild);console.log(ol.firstElementChild);console.log(ol.lastElementChild);</script>
</body>
实际开发的写法，既没有兼容性有返回第一个元素节点
// 第一个元素节点console.log(ol.children[0]);// 最后一个元素节点console.log(ol.children[ol.children.length - 1]);
新浪下拉菜单案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: black;}/* 将下拉框加上黄色边框 */.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;width: 100%;left: 0;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style>
</head><body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li></ul><script>// 鼠标经过微博时弹出下拉框，每个微博有对应下拉框var nav = document.querySelector('.nav');var lis = nav.children; // 得到4个lifor (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() { // 当鼠标经过微博时this.children[1].style.display = 'block'; // li的第二个孩子ul display='block' 显示}lis[i].onmouseout = function() { // 当鼠标离开微博时this.children[1].style.display = ''; // // li的第二个孩子ul display='none' 不显示}}</script>
</body></html>
4.兄弟节点
node.nextSibling 包含文本节点等所有节点
node.previousSibling 得到上一个节点
node.nextElementSibling 得到下一个兄弟元素节点
node.previousElementSibling 得到上一个兄弟元素节点
注意： 这两个元素只有IE 11以上浏览器支持
封装一个得到下一个元素节点的函数
<body><div>div</div><span>spann</span><script>var div = document.querySelector('div');// 获取下一个节点，包含文本节点console.log(div.nextSibling);console.log(div.previousSibling);// 获取下一个元素节点console.log(div.nextElementSibling);console.log(div.previousElementSibling);function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if ( el.nodeType == 1) {return el;}}return null;}var next = getNextElementSibling(div);console.log(next);</script>
</body>
5.创建和添加节点
document.createElement(‘tagName’)
创建由tagName指定的HTML元素，因为这些元素原先不存在，是由我们动态生成的，所以也称为动态创建元素节点。
node.appendChild(child) 不带引号
将一个节点添加到指定父节点的子节点列表末尾。类似于css的after伪元素。添加节点
node.insertBefore(child,指定元素)
将一个节点添加到指定父节点的子节点列表前面。类似于css的before伪元素。添加节点
<body><ul></ul><script>var li = document.createElement('li');var ul = document.querySelector('ul');ul.appendChild(li);</script>
</body>
简单版留言发布案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border-color: pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 310px;font-size: 15px;margin-top: 15px;padding: 5px;color: red;background-color: pink;}</style>
</head>
<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>// 文本框中输入的内容会转变为li 添加到body中// 1.创建节点var li = document.createElement('li');var ul = document.querySelector('ul');var text = document.querySelector('textarea');var btn = document.querySelector('button');// 2.添加节点 文本框输入的内容=‘li中的内容’// if (ul的下一个元素节点不为null){// li添加到ul最后一个孩子的后面// }else {// li成为ul的第一个孩子// }btn.onclick = function() {if (text.value == '') {alert('您的输入为空！');return false;}else {var li = document.createElement('li');li.innerHTML = text.value;ul.insertBefore(li,ul.children[0]);}}</script>
</body>
</html>
6.删除节点
node.removeChild(child)
从DOM中删除一个节点，返回删除的节点
<body><button>删除</button><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul><script>// 点击一次，删除一个var btn = document.querySelector('button');var ul = document.querySelector('ul');btn.onclick = function() {if (ul.children.length != 0) {ul.removeChild(ul.children[0]);}else {alert('删除完毕！')}}</script>
</body>
删除留言案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border-color: pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 310px;font-size: 15px;margin-top: 15px;padding: 5px;color: red;background-color: pink;}</style>
</head>
<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>// 文本框中输入的内容会转变为li 添加到body中// 1.创建节点var li = document.createElement('li');var ul = document.querySelector('ul');var text = document.querySelector('textarea');var btn = document.querySelector('button');btn.onclick = function() {if (text.value == '') {alert('您的输入为空！');return false;}else {var li = document.createElement('li');li.innerHTML = text.value + "<a href='#'>删除</a>";ul.insertBefore(li,ul.children[0]);var del = document.querySelector('a');del.onclick = function() {ul.removeChild(li);}}}</script>
</body>
</html>
7.复制节点
node.cloneNode()
返回调用该方法的节点的一个副本，也成为克隆节点/拷贝节点
1.如果括号里面的参数为空或者false，则是浅拷贝，即只克隆节点本身，不赋值里面的子节点。
2.如果括号里面为true，则是深拷贝，同时克隆里面的子节点。
<body><ul><li>11</li><li>2</li><li>3</li></ul><script>var ul = document.querySelector('ul');// cloneNode(true) 为深复制var li1 = ul.children[0].cloneNode(true);ul.appendChild(li1);</script>
</body>
动态生成表格案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style>
</head><body><table cellspacing='0'><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table><script>// 以对象形式存储var dates = [{name: '魏璎珞',subject: 'JavaScript',score: 100},{name: '弘历',subject: 'JavaScript',score: 98},{name: '傅恒',subject: 'JavaScript',score: 99},{name: '明玉',subject: 'JavaScript',score: 88},{name: '大猪蹄子',subject: 'JavaScript',score: 38}];// 需要创建多个行，有几个name就创建多少行// var ul = document.createElement('ul');// ul.appendChild(tbody);var tbody = document.querySelector('tbody');for (var i = 0; i < dates.length; i++) {var tr = document.createElement('tr');tbody.appendChild(tr);// 行里面创建单元格 tdfor (var k in dates[i]) {// 创建单元格var td = document.createElement('td');td.innerHTML = dates[i][k];tr.appendChild(td);}// 创建有删除两个字的单元格var td = document.createElement('td');tr.appendChild(td);td.innerHTML = "<a href='javascript:;'>删除</a>";}var del = document.querySelectorAll('a');for (var i =0;i<del.length;i++) {del[i].onclick = function() {// 点击删除，删除del所在的行tbody.removeChild(this.parentNode.parentNode);}}</script>
</body></html>
8.创建元素
document.write()
直接将内容写进页面的内容流，但是文档流执行完毕，则他会导致页面全部重绘
innerHTML
document.createElement()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击</button><p class='inner'>abc</p><script>// 三种创建元素方式// 1.document.write()var btn = document.querySelector('button');btn.onclick = function() {document.write('<div>111</div>');}// 2.innerHTMLvar inner = document.querySelector('.inner');inner.innerHTML = '<a href="#">百度</a>'// 3.document.createElement()var create = document.createElement('.create')var a = document.createElement('a');// 将create添加到a的create.appendChild(a);</script></body>
</html>
区别
1.document.write 是直接将内容写入页面的内容流，但是文档加载完毕后，则他会导致页面全部重绘。
2.innerHTML 是将内容写入某个DOM节点，不会导致页面重绘。
３.innerHTML 创建多个元素效率更高（以数组形式拼接），结构稍复杂。
4.createElement() 创建多个元素效率会低一点，但是结构清晰。
总：innerHTML比createElement 效率更高。
DOM——页面文档对象模型 （2）相关推荐
- 蓝旭前端预习5之DOM（文档对象模型）
目录 一.Web API 1.作用 2.分类 二.DOM(文档对象模型) 1.概念 2.作用 3.DOM树 4.DOM对象 三. 获取/查找DOM元素(拿过来) 1.根据CSS选择器来获取DOM元素 ...
- Javascript的HTML DOM （文档对象模型）
Javascript的HTML DOM (文档对象模型) 一.HTML DOM (文档对象模型) 采用DOM的方式来操作网页的元素,通过 HTML DOM,可访问 JavaScript HTML 文档 ...
- dom定义了访问html文档对象的,HTML DOM （文档对象模型）
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 DO ...
- DOM（文档对象模型）
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法. DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HT ...
- DOM（文档对象模型）（二）深入了解DOM节点
文章目录 前言 对元素节点的操作 一.通过节点关系获取节点 1.childNodes 得到所有的子节点 2.children 得到所有元素节点 3.firstChild 得到第一个子节点 4.firs ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）...
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- 文档对象模型 （DOM） ：初学者介绍和指南
果你已经使用JavaScript一段时间了,你可能相当熟悉DOM(文档对象模型)和CSSOM(CSS对象模型)脚本.除了 DOM 和 CSSOM 规范定义的接口之外,CSSOM 视图模块中还指定了方法 ...
- html中js方法中如何传递本元素对象,JS HTML DOM (文档对象模型)
DOM简介 当网页加载时,浏览器会创建页面的文档对象模型(DOM).通过DOM,JS可以对HTML实现以下操作: 改变页面中的所有HTML元素. 改变页面中的所有HTML属性. 改变页面中的所有CSS ...
- 详细了解文档对象模型（DOM）
我们都听说过与JavaScript相关的DOM或文档对象模型.DOM是Web开发中一个非常重要的概念.没有它,我们就无法在浏览器中动态修改HTML页面. 学习和理解DOM可以更好地访问.修改改和监听H ...
最新文章
- 谈谈Linux下的数据流重定向和管道命令
- android开发rn插件,在Android原生应用中嵌入React Native
- 向上造型和向下造型_学习园地 | 岭南盆景造型艺术——枝
- Android中的AsyncTask异步任务的简单实例
- 南邮CTF-MISC-Remove Boyfriend
- mysql 8.0以上 新版本账号密码策略修改和密码修改
- HDU 5666 Segment 数论+大数
- 【编程开发】之国际号码校验工具 Libphonenumber
- dcp9030cdn定影_兄弟DCP-9030CDN驱动
- 微信通讯录java实现的,小程序组件之仿微信通讯录的实现代码
- java源文件只能有一import_Java源文件的声明规则
- 小程序 腾讯兔小巢 对接
- 三层交换机配置实现不同网络互通
- SQL Server 2005无日志文件附加数据库
- 自学用——html+css（要点）
- 【2022秋招】IC设计/FPGA开发秋招经历总结(2)——公司专题
- [BUU刷题记录]day01-起步
- 同时爱上一个男人的两个女人
- isFile()exists() isDirectory()
- MOS管的工作原理和区分