文档对象模型DOM(Document Object Model)
文档树
- document
- HTML
- HEAD
- TITLE
- BODY
- H1
- P
- HEAD
- HTML
操作docment的常用方法
- 根据一个id获得一个对象
//获得一个对象 输出这个对象 则会得到这个id所对应的标签
$ document.getElementById('page-title')
$ var pageTitle = document.getElementById('page-title')
$ pageTitle
输出标签内容
- 根据标签获得内容
//根据li标签获得一个对象，这个对象是一个数组
$ var list = document.getElementsByTagName('li')
$ list[0]
输出这个数组中的第一个元素 也就是一个li标签的内容
- 返回找到的所有元素
//获取类名为artist-list中的li标签的元素
$ document.querySelectorAll('.artist-list li')
//输出所有的li标签
- 返回找到的第一个元素
//获取类名为artist-list中的li标签的元素
$ document.querySelector('.artist-list li')
//输出找到的第一个li标签
- 获得H1元素的一个属性
$ var pageTitle = document.getElementById('page-title')
//获得节点的名称
$ pageTitle.nodeName
输出H1
//输出H1标签的名称
pageTitle.innerText
输出H1的名称
//输出H1的父节点
$ pageTitle.parentNode
输出<body>....</body>
//输出H1上一个的同级标签
$ pageTitle.previousElementSibling
//输出H1的下一个同级标签
pageTitle.nextElementSibling
//输出H1的下一个同级标签的内容
pageTitle.nextElementSibling.innerText
//获得元素的子节点（子节点有很多包括元素类型的节点，文本类型的节点）
//例如
<ul class="artist-list">
<li>1Chris Martin</li>
<li>2Chris Martin</li>
<li>3Chris Martin</li>
<li>4Chris Martin</li>
<ul>
//获得类名为artist-list的ul元素 并输出为对象
$ var artistList = document.querySelector('.artist-list');
$ artistList.childNodes
//元素类型的子节点
$ artistList.childElementCount
输出为4 因为有四个li元素
//得到第一个元素类型的子节点
$ artistList.firstElementChild
输出第一个li元素的内容
$ artistList.firstElementChild.innerText
输出第一个元素类型的子节点的内容
//替换第一个元素类型的子节点的内容
$ artistList.firstElementChild.innerText = '克里斯 马丁'
//返回最后一个元素类型的子节点
$ artistList.lastElementChild
输出最后一个元素类型的标签<li>4Chris Martin</li>
----------分割线---------
//创建元素类型的li节点
$ var newMember = document.createElement('li')
//创建一个文本类型的节点
$ var newMemberText = document.createTextNode('张三')
//把创建的这个文本节点添加到元素类型的li节点中
newMember.appendChild(newMemberText )
//把创建的这个li元素添加到文档的某一个地方
$ document.querySelector('.artist-list').appendChild(newMember)
输出<li>张三</li>
//删除刚才插入的li元素
$ document.querySelector('.artist-list').remove(newMember)
//把创建的li元素插入到指定的位置
//获得类名为artist-list的元素
$ var artistListdocument.querySelector('.artist-list')
//这个方法有两个参数，第一个参数是要放置的东西 第二个参数是元素节点的位置
$ artistList.insertBefore(newMember,artistList.firstChild)
------分割线------
//在ul元素的上面添加一个标题元素
$ var bandMember = document.createElement('h3')
// 给这个元素设置文字
$ bandMember.innerText = '乐队成员'
//把bandMember 插到ul的上边 需要在artistList的父节点应用insertBefore的这个方法
$ artistList.parentNode.insertBefore(bandMember,artistList.previousSibling)
事件 Event
处理事件一般有三种方法 1.在元素里面使用事件的属性 2.在js中设置方法 3.绑定方法
- 第一种方法
<body>
<!--
1.当点击元素时执行 onclick="console.log('被点击了！')" 控制台输出 被点击了
2.当鼠标在元素上时执行 onmouseover="console.log('谁在上面')"控制台输出 谁在上面
3.当鼠标离开元素时执行 onmouseout="console.log('离开')" 控制台输出 离开
-->
<a href="#" class="btn" onclick="console.log('被点击了！')"
onmouseover="console.log('谁在上面')"
onmouseout="console.log('离开')"
>一个链接</a>
</body>
- 第二种方法
//一般这个事件都写在js文件中 在脚本文件中处理逻辑
//当加载window时 触发onLoad事件时才处理以下逻辑
window.onload = function(){
//先获取想要添加事件的元素
var btn = document.querySelector('.btn');
//设置处理事件的属性
btn.onclick = function(){
console.log('被电击了');
}
btn.onmouseover = function(){
console.log('谁在上面');
}
btn.onmouseout = function(){
console.log('离开');
}
}
- 第三种方法,给对象绑定方法时间发生时会执行相应的函数 addEventListener这个函数就是这个作用 add添加 Event事件 Listener监听者 添加事件监听者
window.onload = function(){
//先获取想要添加事件的元素
var btn = document.querySelector('.btn');
//事件在发生的时候 会返回一个事件的对象 这个对象会包含好多有用的信息 时间。。。 可以在shouMessage方法中添加个参数event 这个就是事件的对象可以输出
function showMessage(event){
console.log(event)
}
//参数1：事件的名称 一般名称就是去掉前边的on 参数二：要调用的函数 参数3：false 点击的时候不会出发click的方法 而是出发shouMessage方法
btn.addEventListener('click',showMessage,false);
}
事件的传播
- 给li元素设置了点击事件，但是不管点击那个image都会输出对应的alt属性的值 说明 事件的传播 是这样的先点击图片 事件上传到li标签 然后再上传到ul标签 这是冒泡的形式。另一种形式捕获的形式传播。那种形式的传播要看addEventListener这个函数的第三个参数的值 如果是false的形式 则是冒泡的形式 如果是true则是捕获的形式
<body>
<ul class="list-group">
<li>第一
</li>
<li>第二
</li>
<li>第三
</li>
<li>第四
</li>
</ul>
<script src="js/script.js"></script>
</body>
//js文件 冒泡的形式传播 先响应li绑定的事件 再响应ul绑定的事件
var listArray = document.querySelector('.list-group');
function showMessage(event){
console.log(event.target.alt);
}
listArray.addEventListener('click',showMessage,false);
//js文件 捕获的形式
先响应ul绑定的事件 后响应li绑定的事件
stopPropagation停止事件的传播
var listArray = document.querySelector('.list-group');
function showMessage(event){
console.log(event.target.alt);
event.stopPropagation();
}
listArray.addEventListener('click',showMessage,true);
addEventListener这个方法的第三个参数是true，说明是捕获形式的传播，先响应ul的方法，再显示li的方法，但是由于这个方法event.stopPropagation();，ul绑定的方法将不再执行，直接执行li绑定的方法。
网友评论