JavaScript(DOM)

关注

原创最新推荐文章于 2026-11-08 16:39:50 发布 933 阅读 AI 写同款· GEO 优化 ›

JavaScript的DOM（JS）目录 1.DOM概述 2.获取HTML元素 3.修改HTML 4 修改CSS样式 5.元素操作 6.DOM事件 7.EvenListener监听事件 1.DOM概述通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对... 阅读详情

DOM:document object model - 文档对象模型

利用对象模型操作html文档的

顶层对象 - document

html 基本结构

标签

html - console.log（document.documentElement）

body - console.log( document.body );

head - console.log( document.head)

文本 - title - console.log( document.title)

修改标签 - document . title = '你好'

标签获取

1.通过id名来获取 - 方法 - document.getElementById('id名')

2.通过标签名来获取 - 方法 - document.getElementsByTagName('标签名') - 获取到的是一个集合，集合中会将当前页面中所有当前标签都获取到，哪怕只有一个，也是集合

3.通过类名来获取 - 方法 - document.getElementsByClassName('类名') - 获取到的也是集合

4.通过标签的name属性 - 方法 - document.getElementsByName('name属性的值')

5.通过css选择器来获取一个标签 - 方法 - document.querySelector('css选择器') - 获取到满足css选择器的第一个标签

6.通过css选择器来获取所有满足css选择器的标签们 - 方法 - document.querySelectorAll(css选择器)

关系获取：

获取所有子标签：父.chlidren

获取第一个子标签：父.firstElementChild

获取最后一个子标签：父.lastElementChild

获取父标签：子.parentElement

获取下一个兄弟标签：哥哥.nextElementSibling

获取上一个兄弟标签：弟弟.previousElementSibling

内容操作

获取文本内容 innerText

获取到的标签 . innerText

设置标签.innerText = 值

操作纯文本 - 获取只能获取文本 / 设置标签不被解析

获取带标签的内容 innerHTML

获取到的标签 . innerHTML

设置标签.innerHTML = 值

操作带标签的内容 - 获取连标签也能获取到 / 设置标签能被解析

表单元素内容：value

表单元素.value

表单元素.value = 值

设置类名 className

<style>
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
    .red{
        background-color: #f00;
    }
</style>
<body>
<div class="box"></div>
<button>按钮</button>
</body>
<script>
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.onclick = function() {
    // 给box设置类名
    /*
    标签.className = '类名'
    */
    box.className = 'box red'
    // box.className = ''
}
</script>

类名设置dome

<style>
    ul{
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    ul:after{
        content: '';
        display: block;
        clear: both;
    }
    ul li{
        float:left;
        padding: 5px 10px;
        margin: 5px 10px;
        border: 1px solid #ccc;
    }
    ul li.active{
        background-color: #f00;
        color: #fff;
    }
</style>
<ul>
    <li class="active">导航1</li>
    <li>导航2</li>
    <li>导航3</li>
</ul>
</body>
<script>
/*
获取标签
循环绑定事件
添加点击
将所有的li类名的清空
给当前点击的li添加类名active
*/ 
var lis = document.querySelectorAll('ul li');
for(i=0; i<lis.length; i++){
    lis[i].onclick = function(){
        for(j=0;j<lis.length;j++){
            lis[j].className=''
        }
        this.className = 'active'
    }
}
</script>

设置样式

获取：window.getComputedStyle(标签) 返回所有css键值对组成的对象

语法：标签.style.css键 = 值(除了数字以外，所有的值都是字符串)

<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>
<body>
<div class="box"></div>
<button>按钮</button>
</body>
<script>
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.onclick = function() {
    // 修改box的样式 
    // box.style.background-color = '#0f0'
    // box.style
    // box.style['background-color'] = '#0f0'
    box.style.width = '300px'

    // 在设置样式的时候，如果css键里面包含了连字符，可以将键包含的两个单词做小驼峰写法
    // box.style.backgroundColor = '#0f0'
    // box['style'].backgroundColor = '#00f'
    box['style']['backgroundColor'] = '#00f'
}
console.log(window.getComputedStyle(box));
console.dir(window.getComputedStyle);
</script>

属性操作

操作标签属性

设置属性

添加属性 - 标签.setAttribute(键，值)

修改属性 - 标签.setAttribute(键，值）

获取属性的值 - 标签.getAttribute(键）

删除属性 - 标签.removeAttribute(键）

利用属性操作设置样式

div.setAttribute('style','width:100px;height:100px;background-color:#0f0;')

利用属性操作设置类名

div.setAttribute('class', 'border')

获取到的标签其实都是对象，使用console.dir()可以输出对象的样子，既然是对象，就可以像对象一样进行属性操作

节点操作

1.创建节点 - document.createElement('标签名'）
var div = document.createElement('div')
console.log(div)
2.插入节点

将标签放到父标签的末尾作为子标签 - 父标签.appendChild(子标签-标签对象)
var b = document.createElement('b')
b.innerText = '哈哈'

// // 将b标签放到body中
document.body.appendChild(b)
将新标签放到某个已经存在的子标签的前面 - 父标签.insertBefore(新标签，已经存在的子标签)
var i = document.createElement('i')
i.innerText = '嘿嘿'

// // 把i标签放在b标签的前面
document.body.insertBefore(i, b)
3.替换节点 - 父标签.replaceChild(新标签，已经存在的子标签)
var s = document.createElement('s')
s.innerText = '嘻嘻'

// // 用s将i替换掉
document.body.replaceChild(s, i)
4.复制节点 - 标签.cloneNoed() - 默认只能复制空标签

// // var newB = b.cloneNode() //一般不用
// // 如果要讲标签内部的内容也复制出来，需要给cloneNode方法添加参数 - true
var newB = b.cloneNode(true)
console.log(newB);
// console.dir(newB);
5.删除节点 - 父标签.removeChild(被删除的子标签)
document.body.removeChild(s)

节点dome

利用节点操作实现表格删除

 <style>
        td:last-child{
            background-color: #abcdef;
        }
    </style>
</head>
<body>
    <table border=1 width="500">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成名绝技</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
</body>
<script>
var arr = [
    {
        name:"令狐冲",
        age:20,
        sex:"男",
        skill:"独孤九剑"
    },
    {
        name:"东方不败",
        age:50,
        sex:"女",
        skill:"葵花宝典"
    },
    {
        name:"任我行",
        age:55,
        sex:"男",
        skill:"吸星大法"
    }
];

/*
获取tbody
循环遍历tr  td
创建  tr 放入tbody中    td放入tr中
用函数包含循环，并调用
创建删除表格
遍历添加点击事件
*/
var tbody = document.querySelector('tbody');
loadHTML()
function loadHTML(){
        for(i=0; i<arr.length;i++){
        var obj = arr[i]
        var tr = document.createElement('tr');
        tbody.appendChild(tr)
        var td = document.createElement('td')
        tr.appendChild(td)
        td.innerText = i+1
        for(var j in obj){
            var td = document.createElement('td')
            td.innerText = obj[j]
            tr.appendChild(td)
        }
        var td = document.createElement('td')
        td.innerText = '删除'
        tr.appendChild(td)
    }
}
var tds = document.querySelectorAll('td:last-child');
for(var k=0;k<tds.length;k++){
    tds[k].onclick = function(){
        tbody.removeChild(this.parentElement)
    }
}
</script>

获取元素（坐标、大小）

元素坐标

标签.offsetLeft

标签.offsetTop

获取到的是相对于设置过定位的父元素的位置

top是个关键字，代表window

<style>
    .big{
        width: 300px;
        height: 300px;
        background-color: #f00;
        position: relative;
    }
    
    .small{
        width: 100px;
        height: 100px;
        background-color: #00f;
        position:absolute;
        left: 100px;
        top: 100px;
    }
    </style>
</head>
<body>
<div class="big">
    <div class="small"></div>
</div>
<button>按钮</button>
</body>
<script>
// 获取small的位置
var small = document.querySelector('.small')
var left = small.offsetLeft
var t = small.offsetTop
console.log(left, t);

document.querySelector('button').onclick = function(){
    var timer = setInterval(function(){
        var t = small.offsetTop
        // console.log(t);
        t += 2
        if(t >= 400){
            t = 400
            clearInterval(timer)
        }
        small.style.top = t + 'px'
    }, 10)
}
</script>

元素大小

1.标签.clientWidth 标签.clientHeight - 获取到的是不包含表边框大小

var box = document.querySelector('.box')
var w = box.clientWidth
var h = box.clientHeight
console.log(w,h);

2.标签.offsetWidth 标签.offsetHeight - 获取到的是包含边框的大小

var w = box.offsetWidth
var h = box.offsetHeight
console.log(w,h);

获取元素窗口大小

1.包含滚动条窗口大小

window.innerWidth

window.innerHeight

2.不包含滚动条的窗口大小

document.documentElement.clientWidth

document.documentElement.clientHeight

var w = document.documentElement.clientWidth

console.log(w);

var h = document.documentElement.clientHeight

console.log(h);

3.获取body大小

document.body.clientWidth

document.body.clientHeight

var w1 = document.body.clientWidth

var h1 = document.body.clientHeight

console.log(w1 ,h1);

获取滚动过的距离

有文档声明的写法

document.documentElement.scrollTop

document.documentElement.scrollLeft

没有文档声明的写法

document.body.scrollTop

document.body.scrollLeft

兼容写法

var t = document.documentElement.scrollTop || document.body.scrollTop

document.documentElement.scrollTop = document.body.scrollTop = 值

短路运算

短路运算就是一种赋值操作，只是其中有&&和||参与了。将连接的两个值经过判断选择其中一个赋值给变量

|| 或者，左边的数据会转成布尔值，根据或者来进行判断是否能得到true，如果左边是true，或者连接的整体已经可以得到true，此时就会将第一个数据赋值给变量

如果左边是false，就会将第二个数据赋值给变量了
var a = 1 || 2 //1
var a = 0 || false  //false

var a = 1 && 2  //2
var a = 0 && 1  //0