1.DOM (Document Object Model)文档对象模型
js中对象的分类有三种:
- 用户定义对象
- 内建对象 Array Date Math等
- 宿主对象(由浏览器创建的对象)
model map
可以将DOM看成一棵“树”。DOM 把文档看做一棵家谱树,parent、child、sibling等。
整个html文档,会保存一个文档对象document。
2.DOM中的节点
- 元素节点 element node
- 文本节点 text node 没有内容的文档没有任何价值,而大多数内容都是由文本提供
- 属性节点 attribute node 比如<p title='xxx' id='xx'> 这里的title什么的
2.1 获取元素节点的方式
- document.getElementById() 单个对象,最后结果是个Object
- document.getElementsByTagName 多个对象,最后结果是个HTMLCollection,集合,有点像数组push
- document.getElementsByClassName 多个对象,最后结果是个HTMLCollection,集合
<ul id="classlist"> <li class="item">js</li> <li class="item">css</li> <li>DOM</li> </ul> <script> // 1.document.getElementById() 单个对象,最后结果是个Object var eleNode = document.getElementById('classlist') // 获取出来是个对象哦,object // 2.document.getElementsByTagName 多个对象,最后结果是个HTMLCollection,集合,有点像数组push var objList = document.getElementsByTagName('ul') // 3.document.getElementsByClassName 多个对象,最后结果是个HTMLCollection,集合 var oItems = document.getElementsByClassName('item') </script>
2.2. setAttribute()和getAttribute()方法
<head> /// ....... <style type="text/css"> #box{ color: red; } </style> </head> <body> <p tilt="未设置的"> 嗨嗨嗨 </p> <script> var oP = document.getElementsByTagName('p')[0]; // 获取属性值xx.getAttribute,有一个必须的参数,这个节点对象的名字 var title = oP.getAttribute('title'); // 设置属性值xx.setAttribute(name,value),两个参数 oP.setAttribute('id','box') // 注意:DOM工作方法:先静态加载文档的内容,再动态刷新DOM,动态刷新不会影响静态内容,加了这个id,也看不出来加了 cosole.log(title) </script> </body>
2.3 节点对象的单个重要属性介绍
- nodeName 节点名称
- nodeValue 节点的值
- nodeType 节点的类型
nodeName属性:节点的名称,是只读
- 元素节点的nodeName与标签名相同
- 属性节点的nodeName与属性的名称相同
- 文本节点的nodeName永远是#text
- 文档节点的nodeValue永远是#document
nodeValue属性:节点的值
- 元素节点的nodeValue是undefined或null
- 属性节点的nodeValue是属性的值
- 文本节点的nodeValue是文本自身
nodeType属性:节点的类型,是只读的(以下是几个常用的)
- 元素:节点类型是1
- 属性:2
- 文本:3
- 注释:8
- 文档:9
2.4 元素节点对象的增删改查方法
动态操作节点
- 创建节点 createElement()
- 插入节点 appendChild() insertBefore(newNode,node)
- 删除节点 removeChild()
- 替换节点 replaceChild(newNode,node)
- 创建文本节点 createTextNode()
3.样式设置
方法1(不推荐):
<body> <p id="box">llll</p> <script type="text/javascript"> var para = document.getElementById("box"); console.log(para.style) para.style.color = 'white'; para.style.backgroundColor = 'red'; para.style.width='200px' </script> </body>
方法2:通过控制属性类名控制样式
<head> <meta charset="utf-8"> <title>动态操作样式</title> <style type="text/css"> .highlight{ background-color: red; color: white; width: 250px; height: 250px; text-align: center; font-size: 30px; } </style> </head> <body> <p id="box">llll</p> <script type="text/javascript"> var para = document.getElementById("box"); para.setAttribute("class","highlight") </script> </body>
4.查找标签
4.1 直接查找 就是2.1小节的内容
- document.getElementById() 单个对象,最后结果是个Object
- document.getElementsByTagName 多个对象,最后结果是个HTMLCollection,集合,有点像数组push
- document.getElementsByClassName 多个对象,最后结果是个HTMLCollection,集合
4.2 导航查找标签
依赖我们标签的父子兄弟关系定位到我们的目标标签。
- elementNode.parentElement
- elementNode.children
- elementNode.firstElementChild
- elementNode.lastElementChild
- elementNode.nextang // 下一个兄弟标签
- elementNode.previousElementSibling //上一个兄弟标签
4.3 css选择器查找
document.querySelector("css选择器") // 根据cs选择器来获取查找到的第一个元素,返回标签对象(dom对象)
document.querySelectorAll("css选择器") // 根据css选择器来获取查找到的所有元素,返回数组
例:
document.querySelector(".c1 .c2 .c3") // 这样也只能返回第一个dom对象
document.querySelectorAll(".c1 .c2 .c3") // 这样可以返回三个元素的数组
5.绑定事件
- 静态绑定:直接把事件写在标签元素中。
- 动态绑定:在js中通过代码获取元素对象,然后给这个元素进行后续绑定。
静态绑定案例:实现点击一个内容,弹出点击的那个文本,借助了第6小部分的文本操作的知识点。
静态绑定用得很少,因为它的js代码和css代码揉在一起了,最好解耦。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> // 形参不能叫this哦,实参是this function foo(self){ console.log(self); var msg = self.innerHTML; alert(msg) } </script> </head> <body> <div onclick="foo(this)"> click </div> </body> </html>
动态绑定案例:
语法:
dom对象.on事件 = function(){
// 事件触发代码
}
注:事件函数中的this代指的是触发事件的标签
循环绑定:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery-3.3.1.js"></script> </head> <body> <ul class="lst"> <li>111</li> <li>222</li> <li>333</li> </ul> <script> var eles = document.querySelectorAll(".lst li"); console.log(eles); for (var i = 0; i < eles.length; i++) { eles[i].onclick = function () { // console.log(eles[i].innerHTML) /* 不能这么写,这里经典的一个错误 for循环的时候仅仅是声明了这个匿名函数给这个时间,没有执行function里的代码、 等到点击执行的时候,i已经是for循环结束的时候的值了,也就是3 所以如果直接写这行代码,最终会报错 */ console.log(this.innerHTML); } } </script> </body> </html>
6.操作标签(重点)
<标签名 属性1="属性1值" 属性2="属性2值" ...> 文本 </标签名>
- 文本操作
- value操作 像input标签,select标签是没有文本的,但是显示内容由value属性决定。
- css样式操作
6.1 查询文本和设置文本:
- innerHTML
- innerText
都是属性,属性赋值直接用等于号"="。他俩处理标签内容的时候有差别,处理纯文本效果是一样的。
6.2 input标签的value操作
6.3 select标签和textarea的value操作
这两个其实都是蛮简单的,笔记我都没做,也是查询和赋值什么的,直接用。textarea是多行文本。
6.4 css样式操作
两种方式,直接操作属性 ;通过控制属性名来控制样式
直接操作就是 document对象.style.color什么的,就是style属性,后面自己配键值对什么的。
通过属性类名控制就是下面6.5 小节的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态操作样式</title> <style type="text/css"> .highLight{ background-color: black; color: white; width: 250px; height: 250px; line-height: 250px; text-align: center; font-size: 30px; } </style> </head> <body> <p id='box'>MJJ</p> <script type="text/javascript"> // nodeObj.style var para = document.getElementById('box'); /* 1、直接操作样式属性 console.log(para.style); para.style.color = 'white'; para.style.backgroundColor = 'black'; para.style.width = '250px'; para.style.height = '250px'; para.style.textAlign = 'center'; para.style.lineHeight = '250px'; para.style.fontSize = '30px'; */ // 2、通过控制属性的类名来控制样式 para.setAttribute('class', 'highLight'); </script> </body> </html>
6.5 DOM属性操作
elementNode.setAttribute("属性名","属性值");
elementNode.getAttribute("属性名");
elementNode.removeattribut("属性名");
6.6 class属性操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
需求:实现给这个div标签加一个样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color:rebeccapurple; } .c2{ color: blue; } </style> </head> <body> <div class="c1">helloooooooo</div> <script> var ele = document.querySelector(".c1"); ele.onclick = function (){ this.classList.add("c2"); } </script> </body> </html>
7.常用事件
onload事件:
加载事件,某个标签或者某个事件加载完之后触发的事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>窗口加载事件</title> <script type="text/javascript"> /* setTimeout(function(){ var oDiv = document.getElementById('box'); console.log(oDiv); oDiv.onclick = function(){ this.innerHTML = 'alex'; } }, 0) */ // 等待文档元素加载完成才会调用onload() window.onload = function(){ var oDiv = document.getElementById('box'); console.log(oDiv); oDiv.onclick = function(){ this.innerHTML = 'alex'; } } // window.onload = function(){ // console.log(11111); // } </script> </head> <body> <div id="box">MJJ</div> </body> </html>
onsubmit提交事件:
submit按钮是先走我们写的onsubmit事件代码,再走它自带的submit事件。所以可以在onsubmit里写一些判断什么的。
那么如果我们要组阻止它自带的提交事件,有两种方法:
<script> var form = document.querySelector("#i1"); var user = document.querySelector(".c1"); form.onsubmit = function (e){ if(user.value.length<5){ alert("用户名的输入长度应该大于等于5!") // 阻止默认的提交事件 // 方式1 {#return false;#} // 方式2 使用位置参数e,需要在function里传参 e.preventDefault() } } </script>
onchange事件:
针对select标签的一个事件,动态的展示选项。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onchange事件</title> <style> </style> </head> <body> <select name="" id="provice"> <option value="">请选择省份</option> <option value="hubei">湖北省</option> <option value="shandong">山东省</option> <option value="jiangsu">江苏省</option> </select> <select name="" id="city"> <option value="">请选择城市</option> </select> <script> var data = { "hubei": ["襄阳", "武汉", "荆州"], "shandong": ["青岛", "烟台", "济南"], "jiangsu": ["南京", "苏州", "徐州"] }; var provice = document.querySelector("#provice"); provice.onchange = function () { console.log(this.value); var cities = data[this.value]; console.log(cities); var city = document.querySelector("#city"); // 加载城市之前 清空之前的城市 {#city.options.length = 0; #} city.options.length = 1; // 保留了请选城市的那个选项 for (var i in cities) { console.log(cities[i]); //这里很奇怪,Java里i应该就是城市了,这里却是索引 // 创建标签 var option = document.createElement("option"); option.innerHTML = cities[i]; city.appendChild(option);// 父集添加,有几个城市创建几个option } } </script> </body> </html>
onmouse事件:
监听鼠标的一个事件。
<script> var ele = document.querySelector(".c1"); ele.onmouseover = function (){ // 鼠标放上去 this.style.backgroundcolor="red"; }; ele.onmouseleave = function (){ // 鼠标离开 this.style.backgroundcolor="orange"; }; </script>
onkey事件:
和键盘按键相关的事件。onkeydown 和 onkeyup什么的。
获取和失去焦点事件:
onblur和onfocus。
冒泡事件:
就是叠加的感觉,触发一个,底下那个也触发。阻止事件冒泡的是ele.stopPropagation()
标签:style,进阶,para,DOM,JS,var,document,节点,属性 From: https://www.cnblogs.com/isayruby/p/18153568