JS的DOM事件操作

DOM节点的操作

<div class="box" id="container">
        <p class="item" title="111">1</p>
        <p class="item">2</p>
        <p>3</p>
        <input type="text" value="5">
    </div>

getElementById()//里面给的是要操作的节点id号

document.getElementById('container')

getElementsByTagName()//给的是这一类节点的指定标签名

document.getElementsByTagName('p')

querySelector()//这一类是比较常用的  里面如果给的是id 要在id名前加上#  里面如果给的是类就直接在类名前加上.

document.querySelector('.box .item')

querySelectorAll()//给的是所匹配的所有集合标签

同时除了相应的函数方法外 我们还可以使用属性来获取节点信息

innerHTML 返回的类型为标签中的文本  当然还可以通过该元素进行相应的文本更改

document.querySelector('.box .item').innerHTML

parentNode  返回指定节点的父节点

document.querySelector('input').parentNode

children 有老子节点自然头相应的儿子节点

document.querySelector('.box').children

firstElementChild 返回指定元素的第一个子元素节点

lastElementChild  顾名思义啦

节点属性的获取

setAttribute(name,value) 获取相应的标签属性值

document.querySelector('input').getAttribute('value')

DOM的节点添加（下面的代码实例是瞎写的但基本语法上是这样的）

createElement(tagName) 创建指定的节点

newDiv = document.createElement('div')

appendChild(node) 将这一新增的节点添加到相应的父节点上

document.querySelector('div').appendChild(p)

insertAdjacentHTML(position, text)  将指定的文本插入到指定的标签位置

div.insertAdjacentHTML('beforeend', '<p></p>')

下面就是相应的删除环节

removeChild(child) 删除指定子标签但要带上他的老爸

remove()  直接删除相应的节点