JavaScript DOM结构
Posted 幻影-2000
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM结构相关的知识，希望对你有一定的参考价值。
1.DOM 简介
文档对象模型(Document Object Model 简称DOM) 是W3C组织推荐的处理可扩展标记语言(html或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口 通过这些DOM接口可以改变网页的内容 结构和样式。
1.1 DOM树结构
文档:一个页面就是文档 DOM中使用document表示。
元素:页面中的所有标签都是元素 DOM中用element表示
节点:网页中所有的的内容都可以称之为节点(标签 属性 文本 注释等),DOM中使用node表示。
DOM把以上的内容都看作是对象。
获取元素
DOM 在我们实际开发中主要是用来操作元素
(1) 根据ID获取
<body> <div id="time">2020-03-10</div> <!-- 因为我们网页页面从上往下加载 所以先得有标签 所以我们script写到标签的下面--> <script> //根据ID获取 //使用getElementById(\'id\')方法获取带有ID的元素对象 id大小写敏感 var timeDiv = document.getElementById(\'time\'); //返回的是一个Document 的Element对象 console.log(timeDiv); //<div id="time">2020-03-10</div> console.log(typeof timeDiv); //Object //打印返回的元素对象 打印里面的属性和方法 console.dir(timeDiv); </script> </body>
(2) 根据标签名获取
<body> <ul> <li>知否知否</li> <li>知否知否</li> <li>知否知否</li> <li>知否知否</li> </ul> <ul id="nav"> <li>生僻字</li> <li>生僻字</li> <li>生僻字</li> <li>生僻字</li> </ul> <script> //getElementByTagName() 返回的带有指定标签名的对象的集合 以伪数组(有长度和索引号 但没有数组的相应方法 比如 push pop)的形式存储的 var lis = document.getElementsByTagName(\'li\'); console.log(lis); //HTMLCollection(4) console.log(lis[0]); //遍历查询出的所有元素 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } //注意 因为得到的是一个对象的集合 所以我们想要操作里面的元素就需要遍历 //得到的元素对象是动态 //Element.getElementsByTagName() 可以得到元素里面的某些标签 var nav = document.getElementById(\'nav\'); var shengpizi = nav.getElementsByTagName(\'li\'); console.log(shengpizi); </script> </body>
(3) 通过HTML5新增的方法获取
<body> <div class="box">盒子</div> <div class="box">盒子</div> <ul id="nav"> <li>首页</li> <li>产品</li> </ul> <script> //通过HTML5新增的方法获取 //document.getElementsByClassName(\'类名\') //根据类名获取元素对象集合 var boxs = document.getElementsByClassName(\'box\'); console.log(boxs); for (var i = 0; i < boxs.length; i++) { console.log(boxs[i]); } // document.querySelector(\'选择器\'); //根据指定选择器返回第一个元素对象 // 切记 里面的选择器需要加符号 类名选择器 .box id选择器 #nav var firstBox = document.querySelector(\'.box\'); console.log(firstBox); var nav = document.querySelector(\'#nav\'); console.log(nav); //选择第一个li var firstLi = document.querySelector(\'li\'); //元素选择器 console.log(firstLi); //<li>首页</li> //根据指定选择器返回所有的元素对象 //querySelectorAll(\'选择器\') var allbox = document.querySelectorAll(\'.box\'); console.log(allbox); //[div.box, div.box] var lis = document.querySelectorAll(\'li\'); console.log(lis); </script> </body>
(4) 特殊元素获取
获取body元素 获取html元素
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取body元素</title> </head> <body> <script> //1. 获取body元素 var bodyEle = document.body; console.log(bodyEle); console.dir(bodyEle); //2. 获取html元素 var htmlEle = document.documentElement; console.log(htmlEle); </script> </body>
事件基础
javascript 使我们有能力创建动态页面 而事件是可以被JavaScript侦测到的行为
简单理解:触发---响应机制
页面中的每个元素都可以产生某些可以触发js的事件 例如我们可以在用户点击某一个按钮时产生一个事件 然后去执行某些操作
最简单的事件案例:
<body> <button id="btn">唐伯虎</button> <script> //点击按钮 弹出对话框 //事件是有三部分组成 事件源 事件类型 事件处理程序 //我们也称为事件三要素 //事件源 事件被触发的对象 谁 按钮 var btn = document.getElementById(\'btn\'); //事件类型 怎么触发的 比如说 鼠标点击(onClick) 鼠标经过() 键盘按下 //事件处理程序 通过一个函数赋值的方式 完成 btn.onclick = function () { alert(\'点秋香\'); } </script> </body>
执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
案例:
<body> <div>123</div> <script> // 执行事件的步骤 // 点击div 控制台输出 我被选中了 // 获取事件源 var div = document.querySelector(\'div\'); //注册事件 绑定事件 // 添加事件处理程序 div.onclick = function () { console.log(\'哈哈 我被选中了\') } // 常见的鼠标事件 // onclick 鼠标点击左键触发 // onmouseover 鼠标经过触发 // onmouseout 鼠标离开触发 // onfocus 获得鼠标焦点触发 // onblur 失去鼠标焦点触发 // onmousemove 鼠标移动触发 // onmouseup 鼠标弹起触发 // onmousedown 鼠标按下触发 </script> </body>
操作元素
JavaScript的DOM操作可以改变网页内容 结构和样式 我们可以利用DOM操作元素来改变元素里面的内容 属性等 注意以下都是属性
<body> <button>显示当前系统时间</button> <div>某个时间</div> <script> // 从起始位置到终止位置的内容 但它去除html标签 同时空格和换行也会去掉 // element.innerText() // 从起始位置到终止位置的内容 包括html标签 同时保留空格和换行 // element.innerHTML() var btn = document.querySelector(\'button\'); var div = document.querySelector(\'div\'); btn.onclick = function () { var date = new Date(); var y = date.getFullYear() var m = date.getMonth() + 1; var d = date.getDate(); var week = date.getDay(); var arr = [\'周日\', \'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\'] div.innerText = \'今天是 \' + y + \'-\' + m + \'-\' + d + \' \' + arr[week]; } </script> </body>
innerHTML 和innerText的区别
<body> <div></div> <p> 我是文字 <span>123</span> </p> <script> //innerText 和 innerHtml的区别 //innerText 不识别HTML标签 里面的标签会直接显示 还会去除换行和空格 var div = document.querySelector(\'div\'); div.innerText = \'<strong> 今天是: </strong>2020-03-11\'; //innerHTML 是被HTML标签 w3c标准 用的比较多 div.innerHTML = \'<strong>今天是: </strong>2020-03-11\'; //这两个属性是可读写的 可以获取元素里面的内容 var pcontent = document.querySelector(\'p\').innerText; console.log(pcontent); //我是文字 123 不识别HTML标签 所以是 我是文字 123 去除了换行和空格 /* 我是文字 <span>123</span> */ //识别HTML元素 并且保留空格和换行 console.log(document.querySelector(\'p\').innerHTML); </script> </body>
修改元素的属性
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用元素的属性操作</title> <style> img { width: 300px; display: block; } </style> </head> <body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> <img src="../images/ldh.jpg" alt="" title="刘德华"> <script> var ldh = document.getElementById(\'ldh\'); var zxy = document.getElementById(\'zxy\'); var img = document.querySelector(\'img\'); //注册事件 zxy.onclick = function () { img.src = \'../images/zxy.jpg\'; img.title = \'张学友\'; } ldh.onclick = function () { img.src = \'../images/ldh.jpg(89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点