文档对象模型DOM(Document Object Model)

文档树

document
- HTML
  - HEAD
    - TITLE
  - BODY
    - H1
    - P

操作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>第一
             ![](asd)
            </li>
            <li>第二
                ![](asd)
            </li>
            <li>第三
                ![](asd)
            </li>
            <li>第四
                ![](asd)
            </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绑定的方法。