JavaScript-day05

玛卡巴卡21
20 阅读4分钟

一、DOM

概念：(document object model)文档对象模型，专门用于操作HTML文档的，提供了一些方法给你。

二、DOM树

  • 概念：DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document的对象。
  • document对象：不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根。
  • 作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
  • DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象。

三、查找元素

3.1 直接通过HTML的特点去查找元素

  • 通过id查找元素：
var elem = document.getElementById("id值")
  1. 返回值：找到了返回当前找到的DOM元素，没有找到返回一个null
  2. 如果出现多个相同的id，只会找到第一个
  3. 不使用此方法，id留给后端用
  4. 其实根本不用查找，id直接可用
<div id="box"></div>
<script>
    // 通过id去找
    var div = document.getElementById('box')
    var div1 = document.getElementById('box1')
    console.log(div);//<div id="box"></div>
    console.log(div1);//null
</script>
  • 通过标签名查找元素：
var elems = document/已经找到的父元素.getElementsByTagName("标签名")
  1. 返回值：找到了返回一个类数组DOM集合，没找到得到空集合
  2. js只能直接操作DOM元素，不能操作DOM集合，解决方式是要么拿到下标要么遍历
  3. 不一定非要从document开始查找，如果从document去找，会找到所有元素，可以换成已经找到的某个父元素
<ul>
    <li>第一个li1</li>
    <li>第一个li2</li>
    <li>第一个li3</li>
    <li>第一个li4</li>
</ul>
<ul>
    <li>第二个li1</li>
    <li>第二个li2</li>
    <li>第二个li3</li>
    <li>第二个li4</li>
</ul>
<script>
    //通过标签名查找
    var ul1 = document.getElementsByTagName('ul')[0]
    var lis1 = ul1.getElementsByTagName('li')
    var lis = document.getElementsByTagName('li')
    var as = document.getElementsByTagName('a')
    console.log(lis);//HTMLCollection(8) [li, li, li, li, li, li, li, li]
    console.log(as);//HTMLCollection []
    console.log(lis[0]);//拿到第一个li
    console.log(lis1);//HTMLCollection(4) [li, li, li, li]
    console.log(lis1[0]);//拿到第一个ul里面的第一个li
</script>
  • 通过class查找元素：
var elems = document/已经找到的父元素.getElementByClassName("class名")
  1. 返回值，找到了返回一个类数组DOM集合，没找到得到空集合
  2. js只能直接操作DOM元素，不能操作DOM集合，解决方式是要么拿到下标要么遍历
  3. 不一定非要从document开始查找，如果从document去找，会找到所有元素，可以换成已经找到的某个父元素
<p class="p">1</p>
<p class="p">2</p>
<p class="p">3</p>
<p class="p">4</p>
<p class="p">5</p>
<script>
    // 通过class查找
    var ps = document.getElementsByClassName('p')
    var spans = document.getElementsByClassName('span')
    console.log(ps);//HTMLCollection(5) [p.p, p.p, p.p, p.p, p.p]
    console.log(ps[0]);//<p class="p">1</p>
    console.log(spans);//HTMLCollection []
</scripe>

3.2 通过关系去获取元素：

前提条件是必须先找到一个元素才可以使用关系
  • 父元素：elem.parentNode - 单个元素
  • 子元素：elem.children - 集合
  • 第一个子元素：elem.firstElementChild - 单个元素
  • 最后一个子元素：elem.lastElementChild - 单个元素
  • 前一个兄弟：elem.previousElementSibling - 单个元素
  • 后一个兄弟：elem.nextElementSibling - 单个元素
<div class="box1">
    <span>1</span>
    <span class="s">
        <b>1</b>
        <b>2</b>
    </span>
    <span>3</span>
</div>
<script>
    // 通过关系去查找元素
    var s = document.getElementsByClassName('s')[0]
    console.log(s);//<span class="s"></span>
    console.log(s.parentNode);//找父元素      拿到的是box1 -单个元素
    console.log(s.children);//找子元素       拿到的是HTMLCollection(2) [b, b]
    console.log(s.firstElementChild);//找第一个子元素   拿到的是<b>1</b>
    console.log(s.lastElementChild);//找到最后一个子元素   拿到的是<b>2</b>
    console.log(s.previousElementSibling);//找到前一个兄弟  拿到的是<span>1</span>
    console.log(s.nextElementSibling);//找到后一个兄弟   拿到的是<span>3</span>
</script

四、操作元素

前提是先找到元素，才能操作元素
```
<ul>
    <li>第1个li</li>
    <li>第2个li</li>
    <li>第3个li</li>
    <li>第4个li</li>
    <li>第5个li</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li')
    // lis.style.color = "#fc1"//报错  Cannot set properties of undefined (setting 'color')
    lis[0].style.color = "#fc1"
</script>
```

4.1 内容

  • elem.innerHTML：获取和设置开始标签到结束标签之间的内容，支持识别标签的 - 双标签
    1. 获取：elem.innerHTML
    2. 设置：elem.innerHTML="新内容"
  • elem.innerText：获取和设置开始标签到结束标签之间的纯文本，不识别标签的 - 双标签
    1. 获取：elem.innerText
    2. 设置：elem.innerText="新内容"
  • input.value:专门获取/设置input里的内容
    1. 获取：input.value
    2. 设置：input.value="新内容
<body>
    <button>点击</button>
    <a href="https://www.baidu.com/">百度</a>
    <script>
        // 点击切换百度和京东
        var btn = document.getElementsByTagName('button')[0]
        var a = document.getElementsByTagName('a')[0]
        btn.onclick = function() {
            if(a.innerHTML == "百度") {
                a.innerHTML = "京东"
                a.href = "https://www.jd.com/"
            } else {
                a.innerHTML = "百度"
                a.href = "https://www.baidu.com/"
            }
        }
    </script>
</body>

4.2 属性

  • 获取属性值：
    1. elem.getAttribute("属性名")
    2. elem.属性名 - 简化版
  • 设置属性值：
    1. elem.setAttribute("属性名,"属性值")
    2. elem.属性名="属性值" - 简化版
  • 简化版的缺点：
    1. class必须写为className - ES6（2015年）class变成了一个关键字
    2. 不能操作自定义属性

4.3 样式

我们使用内联样式来操作js因为：不会影响到其他样式并且优先级最高
  • 获取样式：elem.style.css属性名
  • 设置样式：elem.style.css属性名="css属性值"
  • 特殊点：
    1. css属性名，有横线的地方，去掉横线，变成小驼峰命名法
    2. border-radius --> borderRadius
    3. 获取时，我们只能取到内部样式

4.4 绑定事件

elem.on事件名=function(){
    操作
    关键字this：
        如果单个元素绑定事件，this指的就是这个元素
        如果多个元素绑定事件，this指的就是当前触发事件的元素
}

一切的获取，往往都是为了判断
一切的设置，可以说是添加也可以说是修改

五、案例

<!-- 开关门效果 -->
<button id="btn" style="background-color: #df6215;">···</button>
<div id="box"></div>
<script>
    btn.onclick = function() {
        if(btn.style.backgroundColor == "rgb(223, 98, 21)") {
            box.style.display = "block"
            btn.style.backgroundColor = "#f3af84"
        } else {
            box.style.display = "none"
            btn.style.backgroundColor = "#df6215"
        }
    }
</script>

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>
<script>
    // 表格隔行变色 奇数次点击奇数行变色 偶数次点击偶数行变色

    var trs = document.getElementsByTagName('tr')
    var j = 0//点击次数
    for(var i = 0; i < trs.length; i++) {
        trs[i].onclick = function() {
            j++
            if(j%2==0) {
                for(var i = 0; i < trs.length; i++) {
                        trs[i].style.backgroundColor = "#fff"
                    if(i%2==0) {
                        trs[i].style.backgroundColor = "pink"
                    }
                }
            } else {
                for(var i = 0; i < trs.length; i++) {
                        trs[i].style.backgroundColor = "#fff"
                    if(i%2!=0) {
                        trs[i].style.backgroundColor = "#fc1"
                    }
                }
            }
        }
    }
</script>

<!-- 选项卡 -->
<ul>
    <li class="active" dy="0">家电</li>
    <li dy="1">数码</li>
    <li dy="2">超市</li>
    <li dy="3">建材</li>
    <li dy="4">维修</li>
</ul>
<div class="active">家电</div>
<div>数码</div>
<div>超市</div>
<div>建材</div>
<div>维修</div>
<script>
    /* var lis = document.getElementsByTagName('li')
    var divs = document.getElementsByTagName('div')
    for(var i = 0; i < lis.length; i++) {
        lis[i].onclick = function() {
            for(var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor="#067cea"
                divs[i].style.display="none"
            }
            this.style.backgroundColor="#9cb6f3"
            var j =this.getAttribute("dy")
           divs[j].style.display="block"
        }
    } */
    var lis = document.getElementsByTagName('li')
    var divs = document.getElementsByTagName('div')
    for(var i = 0; i < lis.length; i++) {
        lis[i].index = i//把下标保存起来
        lis[i].onclick = function() {
            for(var i = 0; i < lis.length; i++) {
                lis[i].className=''
                divs[i].className = ''
            }
            this.className='active'
            divs[this.index].className='active'
        }
    }
</script>

<!-- 购物车 -->
<table>
    <thead>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>iPhone6</td>
            <td>4488</td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>4488</td>
        </tr>
        <tr>
            <td>iPhone6 plus</td>
            <td>5288</td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>5288</td>
        </tr>
        <tr>
            <td>iPad Air 2</td>
            <td>4288</td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>4288</td>
        </tr>
        <tr>
            <td>iPad Air 3</td>
            <td>5288</td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>5288</td>
        </tr>
        <tr>
            <td>iPad Air 4</td>
            <td>6288</td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>6288</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">总计：</td>
            <td id="total"></td>
        </tr>
    </tfoot>
</table>
<script>
    var btns = document.getElementsByTagName('button')
    for(var i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            if(this.innerHTML == '+') {
                subtotal(1,this)
            } else {
                subtotal(-1,this)
            }
            getTotal()
        }
    }
    getTotal()
    function subtotal(num,btns) {
            if(num==1) {
                var span = btns.previousElementSibling
            } else {
                var span = btns.nextElementSibling
            }
            var spanT = parseInt(span.innerHTML) + num
            if(spanT > 0 ) {
                span.innerHTML = spanT
            }
            var price = btns.parentNode.previousElementSibling
            var subtotal = btns.parentNode.nextElementSibling
            subtotal.innerHTML = price.innerHTML * span.innerHTML
    }
    function getTotal() {
        var tbody = document.getElementsByTagName('tbody')[0]
        var trs = tbody.getElementsByTagName('tr')
        for(var i = 0,sum = 0; i < trs.length; i++) {
            var subtotal = trs[i].lastElementChild
            sum += parseInt(subtotal.innerHTML)
        }
        total.innerHTML = sum
    }
</script>
avatar
文章
阅读
粉丝