JS10 DOM

最新推荐文章于 2024-09-20 11:38:47 发布

ฅ逸魚

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量137

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47186832/article/details/109710851

版权

JavaScript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、DOM 简介

浏览器加载顺序是自上向下加载的，读取一行运行一行
- 如果将script标签写在上面的话，在执行代码时，页面还没有加载
- 将script标签写在下面的话就是为了保证加载顺序
- onload事件会在页面加载完成之后才被触发
为window绑定一个onload事件
- 该事件对应的函数将会在页面加载完毕之后执行
- 这样确保代码时，所有的DOM对象都已经加载完毕
追求性能：写下面
- 方便管理：写上边
- 具体情况具体分析

<script type="text/javascript">
	window.onload = function () {
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert("😠");
		};
	};
</script>

在事件对应的属性中设置一些JS代码，
- 这样当事件被触发时，这些代码会执行
- 这种写法是结构和行为耦合，不推荐使用
- <button id="btn" οnclick="alert('(ノ｀Д)ノ')">按钮</button>
浏览器已经为我们提供了文档节点对象，这个对象是window属性
- 可以在页面中直接使用，文档节点表示的是整个网页
- console.log(document);

    //获取到button对象
var btn = document.getElementById("btn");
    //修改btn中的文字
btn.innerHTML="上的飞机啊收到";
console.log(btn);

事件：
- 就是用户和浏览器之间的交互行为
- 可以为按钮的对应事件绑定处理函数的形式来响应事件

	//获取按钮对象
var btn = document.getElementById("btn");
	//为按钮的对应事件绑定处理函数的形式来响应事件
	//绑定一个单击事件
	//为单击事件绑定的函数，被称为单机响应函数；双击则为双击响应函数
btn.onclick = function(){
	alert("😠");
};

2、DOM 查询

<script type="text/javascript">
	//定义一个函数，为指定的元素绑定单击响应函数
	//参数idStr，要绑定的单击响应函数的对象id属性值
	//参数fun，事件的回调函数，当单机元素时，该函数会被触发
	function myClick(idStr){
		var btn = document.getElementById(idStr);
		btn.onclick = fun;


	window.onlad= function () {
		//为id为btn01的按钮绑定一个单机响应函数
		var btn01 = document.getElementById("btn01");
		btn01.onclick = function () {
			//查找#bj节点
			var bj = document.getElementById("bj");
			//innerHTML 可以通过这个属性获取到元素内部的html代码
			alert(bj.innerHTML);
		};

		var btn02 = document.getElementById("btn02");
		btn02.onclick = function () {
			//查找所有的li节点
			//getElementsByTagName()可以根据标签名来获取一组元素节点对象
			//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
			//即使查询到的元素只有一个，也会封装到对象中
			var lis = document.getElementsByTagName("li");
			for (var i=0;i<lis.length;i++) {
				alert(lis[i].innerHTML);
			}
		};

		var btn03 = document.getElementById("btn01");
		btn03.onclick = function () {
			//查找name=gender的所有节点
			var inputs = document.getElementsByTagName("gender");
			for (var i=0;i<lis.length;i++) {
				//innerHTML用来获取元素内部的HTML代码
				//所以对于自结束标签，这个属性没有任何意义
				//alert(inputs[i].innerHTML);

				//想要读取内容，直接使用 ：元素.属性名
				//例子：元素.id
				//但是，class属性不能采用这种方式，读取class属性时需要使用元素.classNmae
				alert(inputs[i].className);
			}
		};

		var btn04 = document.getElementById("btn04");
		btn04.onclick = function () {
			//查找#city下所有li节点
			var city = document.getElementById("city");
			var lis = city.getElementsByTagName("li");
			for (var i=0;i<city.length;i++) {
				alert(lis[i].innerHTML);
			}
		};

		var btn05 = document.getElementById("btn05");
		btn05.onclick = function () {
			var city = document.getElementById("city");
			//返回#city的所有子节点
		/*
			childNodes属性会获取包括文本节点的所有子节点
				根据DOM标签间空白也会当成文本节点
			注意：在IE8及以下的浏览器中，不会将空白文本当场子节点
				所以该属性在IE8中会有4个子元素，，而在其他浏览器中有9个
			children属性可以获得当前元素的所有子元素
		*/
			var cns = city.childNodes;
			var cns2 = city.children;
			for (var i=0;i<cns.length;i++) {
				alert(cns[i]);
			}
		};

		var btn06 = document.getElementById("btn06");
		btn06.onclick = function () {
			//返回#phone的第一个子节点
			var phone = document.getElementById("phone");
			//firstChild可以获取到当前元素的第一个子节点
			var fir = phone.firstChild;
			//firstElementChild可以获取当前元素的第一个子元素
			//firstElementChild不支持IE8及以下浏览器
			//fir = phone.firstElementChild;
			alert(fir);
		};

		//返回#bj的父节点
		myClick("btn07",function () {
			var bj = document.getElementById("bj");
			var pn = bj.parentNode;
			//innertText：
				//该属性可以获取到元素内部的文本内容
				//他和innerHTML相似，不同的是，它会自动将html去掉
		});

		//返回#android的前一个兄弟节点
		myClick("btn08",function(){
			var ad = document.getElementById("android");
			//也会获取空白文本
			var ps = ad.previousSibling;
			//获取前一个兄弟元素，IE8及以下不支持
			//var ps = ad.previousElementSibling;
		});

		//返回#username的value属性值
		myClick("btn09",function(){
			var um = document.getElementById("username");
			//文本框中的value属性值，就是文本填写内容
			alert(um.value);
		});

		//设置#username的value属性值
		myClick("btn10",function(){
			var um = document.getElementById("username");
			um.value="哈哈哈哈哈哈";
		});

		//返回#bj的文本值
		myClick("btn11",function(){
			var bj = document.getElementById("bj");
			//方式一：var fc = bj.firstChild;
				 //alert(fc.nodeValue);
			//方式二：alert（bj.innerHTML）
			//方式三：alert（bj.innerText）
			//方式四：
			alert(bj.firstChild.nodeValue);
		});
	};
</script>

<body>
    <div id = "total">
        <div class="inner">
            <p>你喜欢哪个城市？</p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

            <p>你喜欢哪款单机游戏？</p>

            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>

            <p>你手机的操作系统是？</p>

            <ul id="phone">
                <li>IOS</li>
                <li id="android">Android</li>
                <li>Windows Phone</li>
            </ul>
        </div>

        <div class="inner">
            gender:
            <input type="radio" name="gender" value="male" />
            Male
            <input type="radio" name="gender" value="female" />
            Female

            <br/>
            <br/>
            name:
            <input type="text" name="name" id="username" value="abcde" />
        </div>
    </div>

    <div id="btnList">
        <div> <button id="btn01">查找#bj节点</button></div>
        <div> <button id="btn02">查找所有的li节点</button></div>
        <div> <button id="btn03">查找name=gender的所有节点</button></div>
        <div> <button id="btn04">查找#city下所有li节点</button></div>
        <div> <button id="btn05">返回#city的所有子节点</button></div>
        <div> <button id="btn06">返回#phone的第一个子节点</button></div>
        <div> <button id="btn07">返回#bj的父节点</button></div>
        <div> <button id="btn08">返回#android的前一个兄弟节点</button></div>
        <div> <button id="btn09">返回#username的value属性值</button></div>
        <div> <button id="btn10">设置#username的value属性值</button></div>
        <div> <button id="btn11">返回#bj的文本值</button></div>
    </div>
</body>

3、DOM 查询的其他方法

在document中有一个属性body，保存的时body的引用
document.documentElement ：保存的是HTML根标签
document.all ：代表页面中所有的元素
getElementsByClassName（）
- 根据元素的class属性值查询一组元素节点对象
- getElementsByClassName可以根据class属性获取一组元素节点对象
- 但是该方法不支持ie8及以下浏览器
document.querySelector（）
- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
- 虽然IE8中没有getElementsByClassName,但是可以使用querySelector代替
- 使用该方法，总会返回唯一的一个元素，如果满足条件有多个，那么它只会返回第一个
querySelectorAll（）
- 该方法和上面那个类似，不同的是他会将符合条件的元素封装到数组中返回
- 即使符合条件的元素只有一个，也会返回数组

<script type="text/javascript">
	window.onload=function () {
		//获取body标签
		var body = document.getElementsByTagName("body")[0];

	//document.body
		var body = document.body;
	//document.documentElement
		var html=document.documentElement;
	//document.all
		var all=document.all;

		all=document.getElementsByTagName("*");
	//getElementsByClassName（）
		var box1 = document.getElementsByClassName("box1");

	//获取页面中所有的div
		var divs = document.getElementsByTagName("div") ;
	//获取class为box1中的所有div

    //document.querySelector（）
		var div = document.querySelector(".body div");
    //querySelectorAll（）
		var div = document.querySelectorAll(".box1");
	}
</script>

<body>
    <div class="box1">
        <div></div>
    </div>
    <div></div>
</body>

4、DOM 的增删改

createElement()
- 创建元素节点
- 他需要一个标签作为参数，将会根据该标签创建元素节点对象
- 并将创建好的对象作为返回值返回
createTextNode()
- 创建文本节点。
- 需要一个内容作为参数，将会根据该内容创建文本节点，并将新的内容返回
appendChild()
- 把新的子节点添加到指定节点。
- 用法：父节点.appendChild(子节点)
insertBefore()
- 在指定的子节点前面插入新的子节点。
- 语法：父节点.insertBefore(新节点，旧节点);
replaceChild()
- 替换子节点。
- 语法：父节点.replaceChild（新节点，旧节点）
removeChild()
- 删除子节点。
- 语法：父节点.removeChild(子节点)
- 常用方式：子节点.parentNode.removeChild(子节点)

<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript">
	function myClick(idStr,fun) {
		var btn = document.getElementById(idStr);
		btn.onclick = fun;
	}

	window.onload=function () {
		//创建广州节点，添加到#city下
		myClick("btn01",function () {
			//createElement()：创建元素节点
			var li = document.createElement("li");

			//创建广州文本节点
			//createTextNode()：创建文本节点
			var gzText = document.createTextNode("广州");

			//appendChild()：把新的子节点添加到指定节点。
			li.appendChild(gzText);

			//获取id为city的节点
			var city = document.getElementById("city");
			//将广州添加到city下
			city.appendChild(li);
		});

		//将”广州“节点插入到#bj节点前面
		myClick("btn02",function (){
			//创建一个广州
			var li=document.createElement("li");
			var gzText = document.createTextNode("广州");
			li.appendChild(gzText);
			var bj = document.getElementById("bj");
			var city = document.getElementById("city");

			//insertBefore() ：在指定的子节点前面插入新的子节点。
			city.insertBefore(li,bj);
		});

		//使用”广州“节点替换#bj节点
		myClick("btn03",function (){
			//创建一个广州
			var li=document.createElement("li");
			var gzText = document.createTextNode("广州");
			li.appendChild(gzText);
			var bj = document.getElementById("bj");
			var city = document.getElementById("city");

			//replaceChild() ：替换子节点。
			city.replaceChild(li,bj);
		});

		//删除#bj节点
		myClick("btn04",function (){
			var bj = document.getElementById("bj");
			var city = document.getElementById("city");

			//removeChild() ：删除子节点。
			//city.removeChild(bj);  //不常用
			bj.parentNode.removeChild(bj);
		});

		//读取#city内的html代码
		myClick("btn05",function (){
			var city = document.getElementById("city");
			alert(city.innerHTML);
		});

		//设置#bj内的html代码
		myClick("btn06",function (){
			var bj = document.getElementById("bj");
			bj.innerHTML = "手动阀";
		});

		myClick("btn07",function (){
			//向city中添加广东
			var city = document.getElementById("city");
			//bj.innerHTML = "手动阀";
			//与上面的方法结合使用
			var li = document.createElement("li");
			li.innerHTML="广州";
			city.appendChild(li);
		});

	};
</script>

<body>
<div id = "total">
    <div class="inner">
        <p>你喜欢哪个城市？</p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
    </div>
</div>

<div id="btnList">
    <div> <button id="btn01">查找#bj节点</button></div>
    <div> <button id="btn02">查找所有的li节点</button></div>
    <div> <button id="btn03">查找name=gender的所有节点</button></div>
    <div> <button id="btn04">查找#city下所有li节点</button></div>
    <div> <button id="btn05">返回#city的所有子节点</button></div>
    <div> <button id="btn06">返回#phone的第一个子节点</button></div>
    <div> <button id="btn07">查找#bj节点</button></div>
</div>
</body>