四方显神

导航

JS进阶（二）DOM

1.DOM (Document Object Model)文档对象模型

js中对象的分类有三种：

  • 用户定义对象
  • 内建对象 Array Date Math等
  • 宿主对象(由浏览器创建的对象)

model map

可以将DOM看成一棵“树”。DOM 把文档看做一棵家谱树，parent、child、sibling等。

整个html文档，会保存一个文档对象document。

2.DOM中的节点

  1. 元素节点 element node 
  2. 文本节点 text  node 没有内容的文档没有任何价值，而大多数内容都是由文本提供
  3. 属性节点 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 节点对象的单个重要属性介绍

  1. nodeName 节点名称
  2. nodeValue 节点的值
  3. 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()

 

posted on 2024-05-06 11:17  szdbjooo  阅读(27)  评论(0)    收藏  举报