HTMl 四： DOM 操作

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。

它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。

DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2、间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

第一种是获取标签的节点元素，包含了标签之间的文本内容，这里的文本内容中，回车符号也是一个节点

第二种方法获得的只是标签本身，而内容被包含到标签本身里了，这种我们常用的的

二、操作

1、class 类操作

var tag = document.getElementById('i1');
tag.classList.add('c1') //给标签添加样式：类
tag.classList.remove('c1') //给标签移除样式：类

<div class='c1 c2'></div>
tag.className 获取结果： "c1 c2"
tag.classList 获取结果： ['c1','c2']

利用以上所学的查找标签，对标签进行 class 操作，来实现一个左侧菜单实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .item .title{
            height: 40px;
            background-color: cadetblue;
            line-height: 40px;
        }
        .item .content a{
            display: block;
        }
    </style>
</head>
<body>
    <div style="width: 200px;height: 600px;border: 1px solid #dddddd">

        <div class="item">
            <div class="title" onclick="changeMenu(this);">菜单一</div>
            <div class="content">
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="changeMenu(this);" id="m2">菜单二</div>
            <div class="content hide">
                 <a href="#">内容二</a>
                 <a href="#">内容二</a>
                 <a href="#">内容二</a>
                 <a href="#">内容二</a>
                 <a href="#">内容二</a>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="changeMenu(this);">菜单三</div>
            <div class="content hide">
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
            </div>
        </div>


    </div>

    <script>

        function changeMenu(currentTagObj) {
            // console.log(currentTagObj);
            // currentTagObj当前点击的标签

            // contentTagObj  当前点击的标签的弟弟
            var contentTagObj = currentTagObj.nextElementSibling;
            contentTagObj.classList.remove('hide');

            // itemObjList  当前点击的标签的父亲的父亲的所有儿子
            var itemObjList = contentTagObj.parentElement.parentElement.children;

            // 循环当前标签的所有 父标签
            for(var i=0;i<itemObjList.length;i++){
                var loopItemObj = itemObjList[i];
                // 只处理不是当前标签的父标签的其他父辈标签，就是其大爷和叔叔
                if(loopItemObj != contentTagObj.parentElement){
                    loopItemObj.lastElementChild.classList.add('hide');
                }
            }
        }
    </script>
</body>
</html>

2、标签内容操作

innerText   获取到标签的所用文本
outerText
innerHTML   获取到标签的HTML内容，假如标签内容含有其他标签，也会同时获取内部的标签本身的标记语言
innerHTML  
value       主要是针对 input 标签的输入框进行获取输入的值

给标签赋值

innerText = "文本"
innerHTML = "可以对HTML格式的标记进行解析"

input 标签赋值:
<input id="username" type="text" />
document.getElementById('username').value = "鲨鱼网络科技有限公司"

3、属性操作

attributes                // 获取所有标签属性，

获取到的结果是一个数组

setAttribute(key,value)   // 设置标签属性

key 和 value 都是字符串形式

getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

注意：以上是对于内部属性和自定义属性的操作；但是对于内部属性来说，建议下面的方法操作。

<input id="ck" type="button" value="全选" onclick="checkAll();" /> 

var tag = document.getElementById('ck')

tag.checked                        // 获取这个标签的属性 checked  的值

tag.checked = true;              //  对内部属性赋值  这里 true 表示选中  false  表示不选中

实例：实现全选、取消、反选功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
		.host_list{
			top:500px;
    		left:30px;
		}
	</style>
</head>
<body>
	<div id="host_info_list" class="host_list"> 主 机 信 息
		<table border="1">
			<thead>
				<tr>
					<th>选择</th>
					<th>主机名</th>
					<th>IP</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody id="htb">
				<tr>
					<td><input type="checkbox"/></td>
					<td>node1.com</td>
					<td>192.168.100.1</td>
					<td>running</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>node2.com</td>
					<td>192.168.100.2</td>
					<td>running</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>node3.com</td>
					<td>192.168.100.3</td>
					<td>running</td>
				</tr>
			</tbody>
		</table>
		<input type="button" value="全选" onclick="checkAll();" />
		<input type="button" value="取消" onclick="removeAll();"/>
		<input type="button" value="反选" onclick="reverseAll();"/>
	</div>
	<script>
		//全选，取消，反选函数
		function checkAll() {
			// 从标签的 ID 获取这个标签，之后再获取到它的所有子标签
			var trList = document.getElementById('htb').children;
			// 循环这些子标签
			for(var i=0;i<trList.length;i++){
				var tr = trList[i];
				/*得到每一个子标签的第一个子标签的子标签，之后设置它们的 checked 为真，
				为真，则是被选中，为假则为取消（即不选中）*/
				tr.firstElementChild.firstElementChild.checked = true;
			}
		}

		function removeAll() {
			var trList = document.getElementById('htb').children;
			for(var i=0;i<trList.length;i++){
				var tr = trList[i];
				tr.firstElementChild.firstElementChild.checked = false;
			}
		}

		function reverseAll(){
			var trList = document.getElementById('htb').children;
			for(var i=0;i<trList.length;i++){
				var tr = trList[i];
				// 首先判断 checked 是否为真
				if(tr.firstElementChild.firstElementChild.checked){
					// 为真，则设置为假，这样就实现了反选
					tr.firstElementChild.firstElementChild.checked = false;
				}else{
					// 否则就是为假，那么设置为真
					tr.firstElementChild.firstElementChild.checked = true;
				}
			}
		}
	</script>
</body>
</html>

4、标签操作

a.创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操作标签

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5、样式操作

var obj = document.getElementById('i1')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

一个小示例，对搜索框进行提示；效果当点击搜索框，框内的提示内容消失，输入内容会被获取到

关于 input 标签的小知识点：

onfocus: 获取焦点当鼠标点击这个输入框的时候，触发一个函数
onblur：失去焦点当鼠标点击其他地方的时候，触发一个函数

使用方法：

onblur="func(this);" // func 函数名，this 参数，这里表示当前触发这个函数的标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>

        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
            <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='请输入关键字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==0||id.value.trim()==''){
                    id.value = '请输入关键字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </body>
</html>

6、位置操作

不是太常用，了解即可

总文档高度
document.documentElement.offsetHeight
  
当前文档占屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距离上级定位高度
tag.offsetTop
  
父定位标签
tag.offsetParent
  
滚动高度
tag.scrollTop
 
/*
    clientHeight -> 可见区域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域：height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
*/

7、JS 提交表单

document.getElementById('f1').submit();

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="f1" action="http://www.sogou.com/web">
        <input type="text" />
        <input type="submit" value="提交" />    // 直接提交
        <input type="button" value="b提交" onclick="submitForm();"  />  // 通过 JS 绑定事件进行提交
        <div onclick="submitForm();" >asdf</div>
    </form>
    <script>
        function submitForm() {
            document.getElementById('f1').submit();
        }
    </script>
</body>
</html>

8、其他操作

console.log("打印出的内容" )           在解释器的终端输出内容
alert("弹出的内容" )                   弹出框，会在浏览器上弹出内容
confirm("弹出提示的内容信息" )          确认框， 会在浏览器上弹出要用户选择的确认框，点确认，会返回 true 点取消，会返回 false
  
// URL和刷新
location.href               获取当前URL
location.href = "url"       重定向
location.reload()           重新加载，即刷新当前页面
  
// 定时器
setInterval(func_name(){},500)    多次定时器；每隔 500 毫秒，就执行一次 函数，它还可以返回一个对象；
clearInterval(obj)                清除多次定时器；obj 是一个定时器的对象，可以利用它对这个定时器进行中断操
setTimeout(func_name(){},500)     单次定时器，也叫超时器；在500毫秒后执行一次函数就退出
clearTimeout(obj)                 清除单次定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="删除" onclick="removeEle();" />
    <div id="i1"></div>

    <script>
        function removeEle() {
            document.getElementById('i1').innerHTML = "删除成功";

            var obj = setTimeout(function () {         
                document.getElementById('i1').innerHTML = "";
            },5000);  // 超过 5 秒后 触发执行函数

            clearTimeout(obj);   // 清除超时定时器



        }
//        var obj1= setInterval(function () {
//            console.log('1');
//            clearInterval(obj1);   // 清除定时器
//        },1000);
//        var obj2= setInterval(function () {
//            console.log('2');
//            clearInterval(obj2);  // 清除定时器
//        },1000)
    </script>
</body>
</html>

三、事件

对于事件需要注意的要点：

this
event
事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

绑定事件

1. 绑定事件

// 直接在标签内进行绑定，之后再在 JS代码中编写事件触发的函数
<div id='i1' onkeydown='func(this,event,123);'> 点我 </div>
<javascript>

function func(a,b,c){

// a,b,c 都是形参
// a -> 当前被点击的标签对象 document.getElementById('i1')
// b -> 当前事件相关的信息
// c = 123
}
</javascript>

注意上面函数中传的实参的意思是：

this --> 关键字，固定写法；表示当前标签对象；

event --> 关键字，固定写法；表示当前事件的相关信息，比如在这里代表的是用户敲击了键盘上的那些键；

123 --> 自定义的实参会被下面定义的函数的形参接收；

这些参数都不是必须的，假如没有那个，那个在函数体内也就无法使用。
2. 绑定事件推荐：☆☆☆☆☆

在 JavaScript 代码中，利用对标签的内部属性进行赋值的方式进行绑定事件

这就相当于对一个变量进行赋值操作，这也就会产生一个特点：

对于同一个便签，一个事件只能被绑定一次，绑定了多次，最后一次生效。

*/
<div id='i1'> 点我 </div>

<script>
document.getElementById('i1).onclick = function(event){
// event -> 当前事件相关的信息
// this -> 当前被点击的标签对象，在这里不用在实参中显示传递，即可在函数体内直接使用
}
document.getElementById('i1).onclick = function(event){
// event -> 当前事件相关的信息
// this -> 当前被点击的标签对象
}
</script>

3. 绑定事件

/*在 JavaScript 代码中，调用标签的方法的方式进行绑定事件；这种方法，可以实现对同一个标签

进行多次绑定同一个事件，并且会同时触发这些事件。需要注意的是事件名称是没有 on 的。*/

document.getElementById('i1').addEventListener('click',function(){
console.log(111);
},true)
document.getElementById('i1').addEventListener('click',function(){
console.log(222);
},true)

addEventListener 的第三个参数 true / false
默认：
事件冒泡 // 从内到外

捕获式 // 从外到内
将最外层添加第三个参数为 true

事件示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1">点我</div>


    <script>
//        document.getElementById('i1').onclick = function () {
//            console.log(111);
//        };
//
//        document.getElementById('i1').onmouseover = function () {
//            console.log(222);
//        }
        document.getElementById('i1').addEventListener('click',function(){
            console.log(111);
        })
        document.getElementById('i1').addEventListener('click',function(){
            console.log(111);
        })
    </script>
</body>
</html>

事件 - 捕获式示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1">第一层
        <div id="i2">第二层</div>
    </div>


    <script>
//        document.getElementById('i1').onclick = function () {
//            console.log(111);
//        };
//
//        document.getElementById('i1').onmouseover = function () {
//            console.log(222);
//        }
        document.getElementById('i1').addEventListener('click',function(){
            console.log(111);
        },true) // true 表示使用捕获式
        document.getElementById('i2').addEventListener('click',function(){
            console.log(222);
        })
    </script>
</body>
</html>

示例：

滚动的字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1">欢迎来到鲨鱼网络科技有限公司</div>

    <script>
        /*
        function func() {
            // 获取标签中间的文字
            var txt = document.getElementById('i1').innerText; // "欢迎来到鲨鱼网络科技有限公司"
            var a = txt.charAt(0);
            var b = txt.substring(1,txt.length);
            var new_txt = b + a;
            // 对指定标签中间内容进行重新赋值
            document.getElementById('i1').innerText = new_txt;
        }
        // 定时器，每500毫秒执行一次
        setInterval(func,500);
        */

        setInterval(function(){var txt = document.getElementById('i1').innerText;var a = txt.charAt(0);var b = txt.substring(1,txt.length);var new_txt = b + a;document.getElementById('i1').innerText = new_txt;},500);


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

时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1"></div>

    <script>
        function currentDate() {
            var da = new Date();  // 获取当前时间，这是一个当前时间对象

            var year = da.getFullYear();     // 年   
            var month = da.getMonth()  + 1;  // 月  默认从 0 开始 ，0 是 1 月
            var day = da.getDate();          // 天 

            var hours = da.getHours();       // 小时
            var minutes = da.getMinutes();   // 分钟
            var seconds = da.getSeconds();   // 秒

            var txt = year + "-" + month + "-" + day + " " + hours+":"+minutes+":"+seconds;

            document.getElementById('i1').innerHTML = txt;
        }
		
		// 计时器
        setInterval(currentDate,1000);        
    </script>
</body>
</html>

posted @ 2017-05-01 22:45 西瓜甜阅读(201) 评论(0) 收藏举报

刷新页面返回顶部

西瓜甜