Javascript回顾（三）

1、DOM树

Document 文档------html文档

Object 对象------html文档元素

Model 模型------元素自身与元素之间的关系

Javascript的一个重要作用是操作DOM树中的元素也叫节点，DOM树是浏览器渲染html文档的重要依据，用来查找操作页面的工具。

onload 与 onclick事件

事件主体：谁能干这事？

事件触发条件：什么时候发生？

事件过程：可预定义也可自定义（通常由函数实现）

总结：事件是对象上的方法，以函数为载体

onload事件的对象是window

onclick事件的对象是document

语法：

window.onload = function () { }

document.onclick = function () {}

<!DOCTYPE HTML>
<html>
<head>
	<meta charset='utf-8'>
	<title>事件测试</title>
	<script>
		window.onload = function () {
       
       
			window.alert('我是window对象，现在页面加载完成啦！');
			document.onclick = function () {
       
       
				window.alert('我是document对象，我被点击啦！');
			}
		}
	</script>
</head>
<body>

</body>
</html>

加载页面时：

点击页面时：

2、选择页面元素的四种常用方法

<!DOCTYPE HTML>
<html>
<head>
	<meta charset='utf-8'>
	<title>获取元素方法测试</title>
	<style>
		.list{
     
     
			color:read;
			font-family:Georgia;
			font-size:24px;	
		}
	
	</style>
</head>
<body>
	<h2 id = 'header'>前端学习</h2>
	<ul class='list'>
	<li>html</li>
	<li>css</li>
	<li>javascript</li>
    </ul>
</body>
</html>

通过标签来获取元素

document.getElementsByTagName()
通过ID来获取元素

document.getElementById()
通过类名（class）来获取

document.getElementByClassName()
通过css选择符的方式获取

document.querySelector()

返回所有符合条件的第一个

document.querySelectorAll()

返回所有的符合条件的

3、节点常用属性

nodeType: 节点类型
- 1:元素节点
  
  nodeType 返回节点类型（由数字表示）
  
  nodeName 返回节点名称
  
  nodeValue 返回节点的值
- 2:属性节点
  
  attributes 返回该节点下的属性节点
- 3:文本节点
  
  childNodes 返回该节点下的所有子节点

4、DOM树节点之间的关系

parentNode 返回该节点的父节点

childNodes 返回该节点的子节点（数组）

childNodes.length 返回该节点的字节点的个数

previousSibling 返回该节点的前一个兄弟节点

nextSibling 返回该节点的下一个兄弟节点

firstChild 返回该节点的第一个子节点

lastChild 返回该节点的最后一个子节点

hasChildNodes 判断该节点是否有子节点（Boolean）

5、子节点类型判断与操作

第一种

window.onload = function () {
    
    
 var li = document.getElementsByTagName('li')  //通过标签名获取元素（元组）
 for(var i=0; i<li.length; i++){
    
      
	li[i].style.color = 'red';   //将每个li标签设置css属性 style="color:red"
		}
	
	}

第二种（推荐）

var ul = document.getElementsByTagName('ul')[0];  //获取元素
	var li = ul.childNodes;  //获取li的子节点（数组）
	for (var i=0; i<li.length; i++){
      
        
	 if (li[i].nodeType == 1){
      
        //判断li节点属性是否为1：元素节点
	  li[i].style.color = 'green';  //设置每个li节点的css属性为 style="color:green"
	 }
	 }

注意：以上两种JS操作都涉及到更改页面元素，所以JS代码要写在body标签内容的最后面。

6、元素节点的增删改查

createElement(标签名) 创建元素节点
createTextNode(文本内容) 创建文本节点内容

文本节点必须插入到元素节点

appendChild(节点) 插入节点到父元素末尾

创建li元素节点和一个文本节点，并将文本节点插入到li元素节点中，设置li元素的css属性。

将li节点插入到其父级节点ul中：

显示效果：

insertBefor(节点，位置) 插入节点到指定位置
removeChild() 删除指定节点

7、JavaScript事件

文档或浏览器窗口发生的特定的交互瞬间，是用户或浏览器执行的某种动作，是javascript和DOM交互的桥梁。

事件不能单独存在，需要绑定到特定的元素对象上才能被感知。

事件类型

窗口事件： onload

鼠标事件： onclick

键盘事件： onkeydown

焦点事件： onfocus

…

事件绑定方式

标签属性（不推荐）

<h2 id = 'header' οnclick="window.alert('我被点击啦！')">前端学习</h2>

当点击“前端学习”时弹窗

对象属性

将事件作为对象的属性

<script>
		window.onload = function() {
         
         
		  var h2 = document.getElementsByTagName('h2')[0];
		  h2.onclick = function () {
         
         
		    console.log('我是h2,我又被点击啦啦啦啦');
		  }
		}
</script>

点击“前端学习”时，将在console中输出“我是h2,我又被点击啦啦啦啦”

对象方法

将事件作为对象的方法

addEventListener() 添加事件

removeEventListener() 删除事件

<script>
		window.onload = function() {
         
         
		  var h2 = document.getElementsByTagName('h2')[0];
		  var showMess = function() {
         
         
		    window.alert('我是对象事件的监听方法')
		  }
		  h2.addEventListener('click', showMess, false); //添加事件
           //h2.removeEventListener('click', showMess, false) //删除事件，加上这句后该事件将不会执行
		}
</script>

点击“前端学习”时弹窗：

事件冒泡与捕捉

捕捉与冒泡相反

终止冒泡的方式：

1、event.cancelBubble = true;

2、event.stopPropagation( );

script>
```

点击“前端学习”时弹窗：

[外链图片转存中...(img-gQqYFYIJ-1608474016315)]

事件冒泡与捕捉

捕捉与冒泡相反

终止冒泡的方式：

1、event.cancelBubble = true;

2、event.stopPropagation( );