Blogger Information
Blog 38
fans 0
comment 0
visits 23517
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
DOM操作与实战案例--2018-9-14
晓明的博客
Original
600 people have browsed it

一.dom相关概念

   1. DOM
    (1). DOM : Document Object Model, 即文档对象模型;
    (2). DOM : 指的是当前要操作的文档内容,准确的说,就是HTML文档,当然不仅限于HTML,通常还包括XML文档;
    (3). html文档中的内容以"树形结构"呈现,即大家常说的: 文档树;
    (4). 文档树中的每个组成部分,称为之"节点", 即 Node类型,文档中的每一个具体的节点,都是一个Node对象:节点对象;
    (5). 文档树中,最重要的三类节点是: Document文档节点, Element元素节点, Text文本节点

-------------------------------------------------------------------------------------------

2. 选择页面元素的方法
    (1). 使用元素的ID属性选择;
    (2). 根据元素的name属性选择;
    (3). 根据元素的标签名称来选择;
    (3). 根据元素的class属性来选择;
    (4). 根据匹配的css选择器来选择;
    (5). 元素的属性的添加,删除,更新操作;

-------------------------------------------------------------------------------------------

3. DOM元素的创建,插入,删除,更新
    (1). 创建: createElement();
    (2). 插入: appendChild();
    (3). 删除: removeChild();
    (4). 更新: replaceChild();

二.元素的获取

   1.id获取实例

    

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>根据id选择元素</title>
</head>
<body>
<ul id="lists">
    <li id="item1">列表项01</li>
    <li>列表项02</li>
    <li id="item2">列表项03</li>
    <li>列表项04</li>
    <li id="item3">列表项05</li>
</ul>

<script>
    //使用id属性获取元素
    let item1 = document.getElementById('item1');
    let item2 = document.getElementById('item2');
    let item3 = document.getElementById('item3');

    //设置元素的样式
    item1.style.backgroundColor = 'yellow';
    item2.style.backgroundColor = 'yellow';
    item3.style.backgroundColor = 'yellow';

    //如果需要使用多个id来获取元素,可以通过函数来简化操作
    function getElements () {   //参数是多个id字符串
        let elements = {};  // 创建一个空的map映射对象用来保存结果
        for (let i = 0; i < arguments.length; i++) {
            let id = arguments[i];  // 获取到要查询的每个id
            let elt = document.getElementById(id); // 根据id查找元素
            if (elt === null) {
                throw new Error("No element with id: " + id);  //抛出异常
            }
            elements[id] = elt; // 将获取到的元素存入到映射数据中
        }
        return elements;  // 返回查询到的元素(以对象字面量方式)
    }

    //获取页面上指定的id属性的元素,返回一个关联数组类型的对象,键名就是id的值
    let elements =  getElements('item1','item2','item3');
    for (let key in elements) {
        elements[key].style.backgroundColor = 'coral';
    }

</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

  

    2,根据name属性来获取元素

       拥有name属性的元素并不多,最常见的就是表单,以及表单中的元素,另外还有图像和内联框架

    

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据name属性来获取元素</title>
</head>
<body>
<!--拥有name属性的元素并不多,最常见的就是表单,以及表单中的元素,另外还有图像和内联框架-->
<!--form,input..., img, iframe-->
<form action="" name="login">
    <input type="text" name="username">
    <input type="password" name="password">
    <button name="button">提交</button>
</form>

<script>
    // getElementsByName()返回是一个NodeList节点列表,不只一个元素
    let login = document.getElementsByName('login')[0];
    // console.log(login);  //控制台查看
    login.style.backgroundColor = 'yellow';
    //还可以将name属性的值,当作docuemtn对象的属性来用,返回唯一元素
    let login1 = document.login;
    // console.log(login1);  //控制台查看
    login1.style.backgroundColor = 'green';

    //这个name属性更多的用于表单数据提交到服务器时,用来识别提交的内容
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

  3.根据标签名Tag来获取元素

  

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据标签名Tag来获取元素</title>
</head>
<body>
<!--ul>li{列表项$$}*5-->
<ul>
    <li>列表项01</li>
    <li>列表项02</li>
    <li>列表项03</li>
    <li>列表项04</li>
    <li>列表项05</li>
</ul>

<script>
   //getElementsByTagName(),根据标签名称获取元素,返回一个元素集合,有length属性,可以当数组来访问
    let ul = document.getElementsByTagName('ul')[0];
    ul.style.backgroundColor = 'lightgreen';

    //元素集合也是一个对象,上面定义了一个方法:item()也可以获取指定元素
    let ul1 = document.getElementsByTagName('ul').item(0);
    ul1.style.backgroundColor = 'lightblue';

    //获取所有的li元素
    let lists = document.getElementsByTagName('li');
    console.log(lists);  //返回一个html元素集合: HTMLCollection
    for (let i = 0; i < lists.length; i++) {
        lists[i].style.backgroundColor = 'lightpink';
    }

    //getElementsByTagName()不仅在document对象上有定义,在Element元素对象上也有定义
    let ul2 = document.getElementsByTagName('ul').item(0);  // 获取ul
    let item2 = ul2.getElementsByTagName('li').item(1); // 在父元素上调用该方法,获取ul中的第二个列表项
    item2.style.backgroundColor = 'green';
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

   4.使用标签名和name属性选择的快捷方式   

    

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用标签名和name属性选择的快捷方式</title>
</head>
<body>
<img src="inc/1.jpg" alt="" name="pic">
<form action="" name="register">
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码不少于8位">
    <button>提交</button>
</form>
<p><a href="http://www.php.cn" name="php">php中文网</a></p>


<script>
    //根据name标签名和name属性选择元素的快捷方式:仅适用于极少的几个,这是历史原因造成的
    // images: 所有的<img>元素 图像,数组, 有三种访问方式
    document.images[0].style.width = '200px';       // 1.标签索引
    document.images['pic'].style.width = '200px';   // 2.name 属性
    document.images.pic.style.width = '300px';      // 3.将name视为元素对象的属性进行访问

    // forms: 所有的<forms>元素 表单,数组
    document.forms[0].style.backgroundColor = 'lightgreen';
    document.forms['register'].style.backgroundColor = 'lightblue';
    document.forms.register.style.backgroundColor = 'red';
    document.forms.item(0).style.backgroundColor = 'lightgreen';  // 类数组可用item()方法获取某个元素

    //a 链接: 所有的<a>元素,NodeList 数组
    document.links[0].style.backgroundColor = 'yellow';
    document.links['php'].style.backgroundColor = 'red';
    document.links.php.style.backgroundColor = 'green';

    // body: <body>元素,总有定义,只有一个
    document.body.style.backgroundColor = 'wheat';

    // head: <head>元素,总有定义,不写会自动添加,只有一个
    let style = document.createElement('style');
    document.head.appendChild(style);

    // documentElement: <html>元素,总有定义,同样一个页面只有一个
    console.log(document.documentElement);

    // doctype: 文档类型,同样也只有一个
    console.log(document.doctype);




</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

     5.通过class属性选取元素

    

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过class属性选取元素</title>
</head>
<body>
<ul class="ul">
    <li class="red">列表项01</li>
    <li>列表项02</li>
    <li class="green">列表项03</li>
    <li>列表项04</li>
    <li class="coral large">列表项05</li>
</ul>

<script>
    //根据元素的class属性值获取元素
    let red = document.getElementsByClassName('red');
    console.log(red);   //返回一个html元素集合,与根据标签名获取的返回数据类型完全一样
    red[0].style.backgroundColor = 'red';

    //该方法也支持在父元素上调用
    document.getElementsByClassName('ul').item(0)
            .getElementsByClassName('green').item(0)
            .style.backgroundColor = 'green';

    //支持多个class 属性值
    let large = document.getElementsByClassName('coral large')[0];
    large.style.backgroundColor = 'coral';
    large.style.fontSize = '1.5rem';

</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

      6.使用css选择器来获取元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
    <li class="red">列表项01</li>
    <li>列表项02</li>
    <li class="green">列表项03</li>
    <li class="green">列表项04</li>
    <li class="coral large">列表项05</li>
</ul>

<script>
    //我们选择页面元素的时候,大多使用css选择器来获取元素,例如
    // .red 获取 class="red"的元素,其实js也支持使用css选择器获取元素
    let lists = document.querySelectorAll('li');
    console.log(lists);     //返回节点列表数组,里面每个元素对应一个元素
    //可以使用
    lists[0].style.backgroundColor = 'coral';
    lists.item(1).style.backgroundColor = 'lightblue';

    //该方法还可以在元素上调用,这也根据标签和class类名获取元素是一样的
    let ul = document.querySelector('#ul'); // 获取满足条件的第一个元素
    console.log(ul);    // 只返回ul列表元素以及内部子元素
    let li = ul.querySelectorAll('.green');
    for (let i = 0; i < li.length; i++) {
        li[i].style.backgroundColor = 'green';
    }

</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    7.文档的遍历

     文档中所有内容都有节点
    每个节点有三个属性:
    1.nodeType节点类型,常用的有: 1->元素, 3->文本, 9->文档
    2.nodeName节点名称(标签名),仅元素节点有意义,其它节点返回null
    3.nodeValue节点值(仅文本或注释节点有意义)

  

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档树的遍历</title>
</head>
<body>
<ul>
    <li>我是列表项01</li>
    <li>我是列表项02</li>
    <li>我是列表项03</li>
    <li>我是列表项04</li>
    <li>我是列表项05</li>
</ul>

<script>
    

    //文档节点对象document是最顶层的
    console.log(document.nodeName);
    console.log(document.nodeType);
    console.log(document.nodeValue);

    //获取某父节点下的所有子节点: childNodes()
    console.log(document.childNodes);  // 文档类型与<html>节点
    //如果想获取到<body>节点,应该如何操作呢?
    console.log(document.childNodes[1]);  //html
    console.log(document.childNodes[1].childNodes[1]);  //理论上应该拿到body,但是并不成功
    // 原因是节点方法不会忽略页面的空白字符,例如回车换行等,都会加入到子节点中
    // 可以查看一下当前获取的节点类型
    console.log(document.childNodes[1].childNodes[1].nodeType);  // 3 文本节点
    // 所以再往下走一步,就可以拿到<body>啦
    console.log(document.childNodes[1].childNodes[2]);  // <body>
    //每次都要进行节点类型的判断很麻烦,而我们主要关心只是元素节点,有没有更好的办法呢?
    // 当然有,js提供了一套API,将文档树看成仅仅由元素组成的,忽略掉内部的文本和注释等节点
    // 下面我们再完成以上的工作: 获取<body>元素
    console.log(document.children[0]);  // 自动过滤掉了非元素节点,只返回了<html>
    console.log(document.children[0].children[1]);  // 自动过滤掉了文本节点,正确返回了<body>

    //回到页面中的ul中,完成列表的遍历
    //获取ul
    let ul = document.children[0].children.item(1).children[0];
    console.log(ul);    // 查看是否获取到了ul 列表
    ul.firstElementChild.style.backgroundColor = 'lightblue';   //第一个子元素
    ul.lastElementChild.style.backgroundColor = 'lightgreen';   //最后一个子元素
    console.log(ul.childElementCount);      // 子元素的数量
    // 子元素数量也可以这样计算
    console.log(ul.children.length);

    // 获取ul中的第三个子元素
    let li1 = ul.children.item(2);
    console.log(li1);       // <li>我是列表项03</li>

    li1.nextElementSibling.style.backgroundColor = 'yellow';        // 下一下兄弟元素
    li1.previousElementSibling.style.backgroundColor = 'cyan';    // 上一个兄弟元素

    //获取当前元素的父元素
    li1.parentElement.style.backgroundColor = 'wheat';

    //获取父节点时候,使用原始的节点方法也是可以的,因为父节点不可能是文本或注释节点
    li1.parentNode.style.backgroundColor = 'red';





</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

        

   8.js对html元素的属性操作(setAttribute(),getAttribute()进行读写)

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js对html元素的属性操作</title>
</head>
<body>
    <!--html元素的属性主要分为二类: 标签自带的原生属性, 以及用户自定义的属性-->
    <img src="inc/1.jpg" alt="" width="320">
    <h3 id="header" class="hello" style="color:red" title="当幸福来敲门" index="php.cn">《当幸福来敲门》别走,幸福终究会到来</h3>

    <script>
        //html标签的原生属性,可以看作是元素对象的属性,进行读写
        let img = document.getElementsByTagName('img').item(0);
        console.log(img.src);   // 可以通过元素对象的属性方式直接查看
        img.src = 'inc/2.jpg';  // 该属性是可写的
        img.width = 400;

        // class 属性,因为class 与js 中的关键字冲突,需要重新定义,使用className表示
        let h3 = document.getElementById('header');
        console.log(h3.className);  // 返回 'hello'
        // style属性被解析成一个对象,而不是传统的字符串,style中的每个选择符就是属性
        h3.style.color = 'green';

        // 非标准的元素属性,我们可以用 setAttribute(),getAttribute()进行读写
        // 在进行读写之前,推荐先进行判断
        if (h3.hasAttribute('index')) {
            console.log(h3.getAttribute('index')); // 查看当前属性的值
            h3.setAttribute('index','php中文网欢迎您');  // 设置属性,到检查器中查看
            h3.removeAttribute('index');  //移除属性
        }

        //其实以上的这4个处理非标准属性的方法也可以处理元素的标准属性
        h3.setAttribute('style','color:blue;font-size:1.5rem');


        // 以数组的方式访问元素的属性,实时更新,注意是只读,不能设置
        console.log(h3.attributes[0]);      //使用数字索引访问
        console.log(h3.attributes['id']);   //使用属性名字符串
        console.log(h3.attributes['style']);   //使用属性名字符串,返回的实时更新后的内容
    </script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

   9.js对元素内容的处理

        元素内容主要是2种: 1.html代码; 2. 纯文本
        innerHTML属性,可以读写元素内的全部内容,包括html代码

        textContent属性,仅获取纯文本

  

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js对元素内容的处理</title>
</head>
<body>
    <p>我正在学习JavaScript编程技术</p>
    <p>我正在学习<strong style="color:red">JavaScript</strong>编程技术</p>
    <script>
        //元素内容主要是2种: 1.html代码; 2. 纯文本
        //innerHTML属性,可以读写元素内的全部内容,包括html代码
        let p1 = document.getElementsByTagName('p')[0];
        let p2 = document.getElementsByTagName('p')[1];
        console.log(p1.innerHTML);  // 纯文本
        console.log(p2.innerHTML);  // 包括html代码

        //textContent属性,仅获取纯文本
        console.log(p1.textContent);  // 纯文本
        console.log(p2.textContent);  // 过滤掉了html代码,只返回了纯文本

        //根据节点类型返回节点的值
        if (p1.childNodes[0].nodeType == 3) {
            console.log(p1.childNodes[0].nodeValue);
        }
        //如果元素内容中包括html代码,还可以获取到吗?
        if (p2.childNodes[0].nodeType == 3) {   //我正在学习
            console.log(p2.childNodes[0].nodeValue);
        }
        //为什么没有获取到剩下的内容?因为后面的节点类型发生了变化,如果想全部获取,必须使用递归函数,超出教学内容



    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

  10.DOM节点的创建,插入和删除

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM节点的创建,插入和删除</title>
</head>
<body>

<script>
    //创建节点
    //1. 创建新元素
    let ul = document.createElement('ul');
    //2. 向元素中添加内容
    ul.innerHTML = '<li>我是列表项1</li>';
    //3. 将新元素添加到页面中,本例是添加到<body>中
    document.body.appendChild(ul);

    //再创建一个列表项
    let li1 = document.createElement('li');
    li1.innerHTML = '我是列表项2';
    ul.appendChild(li1);    // 默认是添加到父元素的未尾

    //如果想在任意位置插入,应该怎么做呢?可以使用insertBefore()
    let li2 = document.createElement('li');
    li2.innerHTML = '<span style="color:red">我是新插入的节点</span>';
    // insertBefore('新节点','插入的位置');
    ul.insertBefore(li2, li1);

    //如果插入的位置为null,就是插入到尾部,与appendChild()功能相同
    let li3 = document.createElement('li');
    li3.innerHTML = '<span style="color:lightgreen">我是新插入的节点</span>';
    // insertBefore('新节点','插入的位置');
    ul.insertBefore(li3, null);

    //删除节点
    ul.removeChild(li3);

    //替换节点
    let li4 = document.createElement('li');
    li4.innerHTML = '<span style="color:blue">我要把别人替换掉</span>';
    ul.replaceChild(li4, li2);

</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三.作业聊天机器人的模拟实现

   

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM实战:模拟智能在线***系统</title>
	<style type="text/css">
		div:nth-child(1) {
			width: 450px;
			height: 650px;
			background-color: lightskyblue;
			margin: 30px auto;
			color: #333;
			box-shadow: 2px 2px 2px #808080
		}
		
		h2 {
			text-align: center;
			margin-bottom: -10px;
		}
		div:nth-child(2) {
			width: 400px;
			height: 500px;
			border: 4px double green;
			background-color: #efefef;
			margin: 20px auto 10px;
		}
		
		ul {
			list-style: none;
			line-height: 2em;
			/*border: 1px solid red;*/
			overflow: hidden;
			padding: 15px;
		}

		table {
			width: 90%;
			height:80px;
			margin: auto;
		}

		textarea{
			/*width: 300px;*/
			border: none;
			resize: none;
			background-color: lightyellow;
			
		}
		button {
			width: 60px;
			height: 40px;
			background-color: seagreen;
			color: white;
			border: none;
			/*text-align: left;*/

		}
		button:hover {
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线***</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
				<td align="left"><button type=button>发送</button></td>
			</tr>
		</table>	
	</div>
	<script type="text/javascript">
		//获取到页面中的按钮,文本域,对话内容区
		let btn = document.getElementsByTagName('button')[0];
		let text = document.getElementsByName('text')[0];
		let list = document.getElementsByTagName('ul')[0];
		let sum = 0;

		//添加按钮点击事件,获取用户数据并推送到对话窗口中
		btn.onclick = function () {
			// alert(text.value)
			//获取用户提交的内容
			if (text.value.length === 0) {
				alert('客官:是不是忘记输入内容了~~');
				return false;
			}
			let userComment = text.value;

			//立即清空用户信息区
			text.value = '';

			//创建一个新节点li
			let li = document.createElement('li');
			li.innerHTML = userComment;  //将用户输入的内容添加到新节点中
			let userPic = '<img src="inc/peter.jpg" width="30" style="border-radius:50%">'; // 设置用户头像
			li.innerHTML = userPic + ' ' + userComment; // 将用户头像与用户的聊天内容合并
			list.appendChild(li);	//发送聊天内容,实际上就是将新节点插入到对话列表中
			sum += 1;	// 聊天记录自增1

			//设置定时器,默认2秒后会自动回复
			setTimeout(function(){
			let info = [
			    '真烦人,有话快说,别耽误我玩抖音',
				'除了退货,退款,咱们什么都可以聊',
				'说啥,本姑娘怎么听不懂呢?再说一遍',
				'在我方便的时候再回复你吧~~',
				'投诉我的人多了,你算老几~~~'
			];
			let temp = info[Math.floor(Math.random()*3)];
			//取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)
			let reply = document.createElement('li');
			let kefuPic = '<img src="inc/zly.jpg" width="30" style="border-radius:50%;">';
			// reply.innerHTML = '你有啥事呀,我的帅哥哥' +kefuPic
			reply.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';

			list.appendChild(reply);
			sum += 1;

			},2000);
			
			// 当聊天记录达到10条时清空窗口
			if (sum > 10) {
				list.innerHTML = '';
				sum = 0;
			}
		}


	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post