JS-DOM

作者: 山猪打不过家猪 | 来源:发表于2022-10-30 21:36 被阅读0次

JS-DOM
JS-DOM
JS-DOM
JS-DOM
JS-DOM
js-dom操作
JS-DOM操作
js-DOM操作
JS-dom操作
JS-DOM事件

image.png

1. 获取元素的方法

document.getElementById()通过ID获取
image.png
document.getElementByTagName()通过标签名获取
image.png

image.png

2. 事件

2.1事件基础

image.png

2.2操作元素

改变元素内容和属性

image.png

<body>
    <button>显示当前时间</button>
    <div>当前时间</div>
    <script>
        var btnShowTime = document.querySelector('button');
        var divShowTime = document.querySelector('div');
        btnShowTime.onclick = function(){
            divShowTime.innerText= '2022-10-31 18:00:00';
        }
    </script>
</body>

获取属性

image.png
排他思想，给所有所有元素添加事件

image.png

image.png

innerHTML和innerText区别

innerHTML支持标签的转义，且获取标签的时候，可以拿整个标签内容，保留空格和换行；
innerText只可以拿到文本内容

3. 节点操作

3.1 常用操作

添加元素

document.innnerHTML(适合复杂，量小)
父节点.appendChild(document.createElement('节点类型'))（适合简单，量多）
但是，innerHTML通过数组添加是最快的

删除元素

节点.remove()

3.2动态表格

image.png

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            width: 500px;
            margin: 100px auto ;
            border-collapse: collapse;
            text-align: center;
        }
        th{
            background: slateblue;
        }
        td,
        th{
            border: 1px solid #333;
        }
        thead {
            height: 40px;
            background-color: #ccc;
        }

    </style>
    
</head>
<body>
    <table>
        <tr>
            <a href=""></a>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>            
        </tr>
    </table>
    <script> 
    // 1.先准备好学生数据
    function Person(uname,subject,score){
        this.uname = uname;
        this.subject = subject;
        this.score =score;
    }       
    var fxx = new Person('fxx','javascript',98);
    var gjj = new Person('gjj','csharp',88);
    var ghh = new Person('ghh','fish',8);
    var personArr = [fxx,gjj,ghh];
    //数据放入tbody 
    // 1.获取Tbody
    var personTbody = document.querySelector('tbody');
    for(var i=0;i<personArr.length;i++){
        //2.创建tr行
        var personTr = document.createElement('tr');
        personTbody.appendChild(personTr);
        //3.遍历单个对象属性
        for(k in personArr[i]){ 
            //4.创建td
            var td = document.createElement('td');
            personTr.appendChild(td);
            td.innerText = personArr[i][k];
        }
        //5.创建有删除的单元格
        var td = document.createElement('td');
        personTr.appendChild(td);
        //注意这里引入当前页js脚本的方法
        td.innerHTML='<a href="javascript:;">删除</a>'
    }
    //6.删除操作
    var as = document.querySelectorAll('a');
    for(var i =0;i<as.length;i++){
        as[i].onclick = function(){
            //7.点击a删除当前行,a的父级的父级(tbody删除，当前节点的父节点的父节点)
            personTbody.removeChild(this.parentNode.parentNode);
        }
    }
    </script>
</body>
</html>

4.总结

DOM获取的元素是object

增
父节点.appendChild(元素)
父节点.insertBefore(元素)
删
父节点.removeChild(元素)

personTbody.removeChild(this.parentNode.parentNode);

改
1.修改元素属性：scr,href,title
2.改不同元素内容：innerHTML,innerText
3.修改表单元素：value,type,disable
4.修改样式：style,className
查
H5推荐：quertSelector,querySelectorAll
1.获取父节点parentNode
2.子节点children
3.兄nextElementSibling
属性操作
serAttribute:设置属性
gerAtrribute获取属性
removeAttribute移除属性