前端 -- JavaScript-DOM

时间 2019-11-15

标签前端 javascript dom 栏目 JavaScript 繁體版

原文原文链接

11.3.16 DOM

什么是DOM?html

document object model 文档对象模型前端

DOM树:python

整个文档就是一棵树,树当中的每个节点都是一个对象:这个对象中维系着属性信息,文本信息,关系信息web
整个文档是从上到下依次加载的,当加载到script标签的时候,会有一个特殊的变量提高的解析方法,致使后定义的函数能够提早被调用数组

在页面上还有一些动做效果:根据人的行为改变的--点击,鼠标悬浮,自动改变的app

js是怎么给前端的web加上动做的?函数

找到对应的标签this
给标签绑定对应的时间spa
操做对应的标签code

1. 查找标签

1.1 直接查找

var a = document.getElementById('标签的id')           // 经过ID查找,直接返回一个元素对象
console.log(a)
var sons = document.getElementsByClassName('标签的类名')  // 经过类名查找,返回元素组成的数组
console.log(sons)
sons[0] //获取到一个标签对象  
var divs = document.getElementsByTagName('标签名')    // 经过标签查找,返回元素组成的数组
console.log(divs)

</ 经过ClassName和TagName得到的标签数组,想要使用某个标签必须经过索引获取该标签对象

1.2 间接查找

找父亲
var a = document.getElementById('baidu')         
console.log(a)
var foodiv = a.parentNode          // 获取到父节点的对象,返回一个

找儿子
var foo= document.getElementById('foo')
foo.children          // 获取全部的子节点,返回一个数组
foo.firstElementChild // 获取第一个子节点
foo.lastElementChild  // 获取最后一个子节点

找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
son1.nextElementSibling     // 找下一个兄弟 返回一个对象
son1.previousElementSibling // 找上一个兄弟 返回一个对象

2. 操做自己的标签

2.1 标签的建立

var obj = document.createElement('标签名')   // a div ul li span
obj就是一个新建立出来的标签对象

2.2 标签的添加

父节点.appendChild(要添加的节点) //添加在父节点的儿子们以后
先建立标签
    var obj = document.createElement('a')
    obj.innerText='JD'
获取父节点,再添加标签
    var fath = document.getElementById('foo')
    fath.appendChild(obj)


父节点.insertBefore(要添加的节点,参考儿子节点) //添加在父节点的某个儿子以前
先建立标签
    var obj = document.createElement('a')
    obj.innerText='JD'
获取父节点和参考节点,再添加标签
    var fath = document.getElementById('foo')
    var seq = document.getElementById('son1')
    fath.insertBefore(obj,seq)

2.3 标签的删除

父节点.removeChild(要删除的子节点)
先找到父节点和要删除的子节点
    var fath = document.getElementById('foo')
    var seq = document.getElementById('son1')
    fath.removeChild(seq)

子节点1.parentNode.removeChile(子节点2)
先找出子节点1,经过子节点1找到父节点,再删除子节点2
    var seq = document.getElementById('son1')
    var seq1 = document.getElementById('son2')
    seq.parentNode.removeChild(seq1)

2.4 标签的替换

父节点.replaceChild(新标签,旧儿子)
先找父节点和须要替换的子节点,建立新的标签
    var obj = document.createElement('a')
    obj.innerText='JD'
    var fath = document.getElementById('foo')
    var seq = document.getElementById('son1')
    fath.replaceChild(obj,seq)

2.5 标签的复制

节点.cloneNode()     //只克隆一层
节点.cloneNode(true) //克隆本身和全部的子子孙孙
注意 :若是克隆出来的标签的id是重复的,那么修改以后才能应用到页面上

3. 节点的属性操做

节点对象.getAttribute('属性名')    //获取标签对象
节点对象.setAttribute('属性名','属性值') //添加标签属性
节点对象.removeAttribute('属性名')  //删除标签属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .odiv{
            width: 100px;
            height: 100px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div id="outer"></div>
    <button id="b1">显示</button>
    <button id="b2">隐藏</button>
</body>
<script>
    // var aobj = document.createElement('a')  // 1.建立标签
    // var fath = document.getElementById('outer') // 2.获取父标签
    // fath.appendChild(aobj) // 3.添加标签
    // aobj.innerText = '百度一下'
    // aobj.getAttribute('href') //获取标签对象
    // aobj.setAttribute('href','http://www.baidu.com') // 4.添加标签属性
    // aobj.removeAttribute('href') //删除标签属性
    var b1 = document.getElementById('b1')
    b1.onclick = function () {
        var obj = document.getElementById('outer')
        obj.setAttribute('class','odiv')
    }
    var b2 = document.getElementById('b2')
    b2.onclick = function () {
        var obj = document.getElementById('outer')
        obj.removeAttribute('class')
    }
    // console.log(fath)
</script>
</html>

4. 节点的文本操做

节点对象.innerText = '只能写文字'
节点对象.innerHTML = '能够放标签'

5. 点的值操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="user" id="user">
-------------------------------------------------------        
    <select name="city" id="city">
        <option value="1" selected>北京</option>
        <option value="2">天津</option>
    <option value="3">上海</option>
</select>
</body>
<script>
    var inp = document.getElementById('user')
    // inp.setAttribute('value','Agoni')
    // inp.removeAttribute('value')
    inp.value='barry'
    inp.value=null
---------------------------------------------------------
    var st = document.getElementById('city')
        st.value  // 查看值
        st.value='2' // 天津
        st.value='3' // 上海
</script>
</html>

6. 节点的类操做

className  获取全部样式类名(字符串)
首先获取标签对象
标签对象.classList.remove(cls)    //删除指定类
标签对象.classList.add(cls)       //添加类
标签对象.classList.contains(cls)  //存在返回true，不然返回false
标签对象.classList.toggle(cls)    //存在就删除,不然添加,toggle的意思是切换,有就删除,若是没有就加一个

7. 事件

</head>
<body>
    <button id="btn">点击一下</button>
</body>
<script>
        //绑定事件方法一
    var btn = document.getElementById('btn') // 获取事件源
    btn.onclick = function () {  //绑定事件
        alert('别点我')           //写事件驱动程序
    }
        //绑定事件方法二
    // btn.onclick = click
    // function click() {
    //     alert('点我干吗')
    // }
</script>
</html>

7.1 页面广告例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .ad{
            background-color: green;
            position: fixed;
            padding: 5px;
            width: 100%;
            height: 50px;
            color: yellow;
            text-align: center;
            line-height: 50px;
        }
        button{
            float: right;
        }
    </style>
</head>
<body>
    <div class="ad">
        python23期皇家赌场开业了,性感荷官在线发牌
        <button id="close">x</button>
    </div>
    <div class='content'>
        我是正文内容
        <img src="0.jpg" alt="">
        <img src="1.jpg" alt="">
    </div>
</body>
<script>
    var btn = document.getElementById('close')
    btn.onclick = function () {
        this.parentNode.style.display = 'none'
    }
</script>
</html>