前端学习-JavaScript基础（DOM）

Yan阿清

已于 2022-04-03 16:05:54 修改

阅读量1.9k

点赞数 15

分类专栏：前端 JavaScript 文章标签： javascript 前端学习

于 2022-03-28 21:44:26 首次发布

本文链接：https://blog.csdn.net/weixin_51346866/article/details/123806969

版权

前端同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

DOM

DOM ：全称Document Object Model ，叫文档对象模型–顶层对象是document。

一、html基本结构

//获取html标签
console.log(document.documentElement) 
//获取body标签
document.body
//获取head标签
document.head
//获取网页标题
document.title
//设置网页标题：
document.title=值

二、获取标签(6种)

1、使用id名，获取标签不严谨，名字可以取关键字

<button id='var'>按钮</button>

var a=document.getElementById('var')

2、通过标签名

<body>
<button class="one">按钮1</button>
<button class="two">按钮3</button>
</body>

<script>
var b=document.getElementByTagName('button')
//多个button也会被获取  
console.log(b) // 控制台输出：HTMLCollection(2) [button.one, button.two]
</script>

3、通过类名

document.getElementByClassName（）

<button class="one">按钮1</button>
var b=document.getElementByClassName('.one')
console.log(b)

4、通过name属性

document.getElementByName（）

<input type="text" name='uname'/>
    
var in=document.getElementByName('uname')
console.log(b)

5、通过css选择器（常用）

document.querySelector（css选择器）

<div></div>

var div=document.querySelector("div")
console.log(div)

//获取到的标签其实是一个对象
console.dir(div)   //div对象，里面有相应属性键值对

document.querySelectorAll（css选择器）

<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
var li=document.querySelectorAll("ul li")  //获取所有的li
console.log(li)

三、内容操作

1、获取文本 innerText

//获取标签
var box=querySecletor('.box')
//获取标签里内容
console.log(box.innerText)
//设置文本内容
box.innerText="hh"

2、获取带标签的内容innerHTML

获取连标签也能获取到/设置标签能被解析

<div class="box">
    这是盒子
</div>

var box = document.querySelector('.box');
console.log( box.innerText );
console.log( box.innerHTML );

区别如下：

请添加图片描述

3、设置内容

box.innerText='<b>hh</b>'
box.innerHTML='<b>hh</b>'

4、表单元素用 .value获取

四、样式操作

获取样式

语法：window.getComputedStyle（标签）

<div class="box" style="width: 300px;"></div>

var box=document.querySelector('.box')
    console.log(box)
    var a = getComputedStyle(box).width //  var a = getComputedStyle(box)['width']
    console.log(a)

设置样式

语法：标签.style.css键 = 值

css键带有连字符的属性用 [‘’] 或者小驼峰写法

box.style.backgroundColor="#aad"
box.style.['background-color']='#ada'

五、属性操作

设置属性

标签.setAttribute(键, 值)

<div ><div>
var div = document.querySelector('div');
div.setAttribute('name', 'aaa')

获取属性

标签.getAttribute(键)

<div name='aaa'><div>
var div = document.querySelector('div');
console.log(div.getAttribute('name'))

删除属性

标签.removeAttribute(键)

<div name='aaa'><div>
var div = document.querySelector('div');
console.log(div.removeAttribute('name'))

利用属性操作设置样式

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

利用属性操作设置类名

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

六、类名操作

类名获取

 标签.className

类名设置

 标签.className = '类名'

例子：

<style>
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
    .red{
        background-color: #f00;
    }
</style>

<div class="box"></div>
<button>按钮</button>

//要先获取标签，在设置类名
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.onclick = function() {
    // 给box设置多一个类名red
    // box.className = 'box red'  //点击按钮div背景变红
    box.className = ''   //点击按钮没有类名，div消失
}

七、窗口的大小

不包含滚动条的窗口大小

documen.documentElement.clientWidth
documen.documentElement.clientHeight

获取body的大小

document.body.clientWidth
document.body.clientHeight

包含滚动条大小

window.innerWidth
window.innerHeight

八、节点操作

创建节点

document.createElement(‘标签名’)

var div=document.createElement('div')  //创建div标签
console.log(div)  //输出：<div></div>

插入节点

appendchild()

 var a=document.createElement('i')
     a.innerText="插入1"
    //  第一种插入 语法：父标签.appenChild(子标签)
     document.body.appendChild(a)  //将i标签放到body中

insertBefore()

 // 第二种插入 语法：父标签.insertBefore(新的子标签，旧的子标签)
    var b=document.createElement('b')
    b.innerText="插入2"
    // 把b标签放到i标签后面
    document.body.insertBefore(b,a)   //输出 ：插入2  插入1

替换节点

replaceChild()

// 替换节点 语法：父标签.replaceChild(新的子标签，旧的子标签)
    var c=document.createElement('p')
    c.innerText="替换3"
    //c换掉a 
    document.body.replaceChild(c,a)   // 输出： 插入2 替换3

复制节点

cloneChild()

 // 复制节点  语法：父标签.cloneNode(true)
    var d=a.cloneNode(true)
    console.log(d)   //控制台输出：<i>插入1</i>

删除节点

removeChild()

 //删除节点  语法： 父标签.removeChild(被删除的子标签)
    document.body.removeChild(b)    //输出 ：替换3

九、节点获取

获取节点的常用
1、获取所有子标签节点：父标签.chilren (例如：ul.children)
2、获取第一个子标签节点：父标签.firstElementChild (例如：ul.firstElementChild)
3、获取最后一个子标签节点：父标签.lastElementChild (例如：ul.lastElementChild)
4、获取父标签节点：子标签.parentElement
5、获取下一个兄弟标签节点；兄弟标签.nextElementSibling
6、获取上一个兄弟标签节点；兄弟标签.previousElementSibling

例子：

<body>
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
<script>
    // 获取所有子节点
    var ul = document.querySelector('ul')
    var chill = ul.childNodes;
    console.log(chill) //li  
    // 获取所有子标签节点
    var chillden = ul.children;
    console.log(chillden)
    //获取父标签的第一个子节点
    var frist = ul.firstChild;
    console.log(frist)
    //获取父标签的第一个子标签节点
    var firstEl = ul.firstElementChild;
    //获取最后一个子节点
    var last = ul.lastChild;
    //获取最后一个子标签节点
    var lastEl = ul.lastElementChild;
    // 获取父节点 (通过子节点)
    var fater = lastEl.parentNode;
    //获取父标签节点 (通过子节点)
    var faterEl = last.parentElement;
    // 获取下一个兄弟节点
    var nextSi = firstEl.nextSibling;
    //获取下一个兄弟标签节点
    var next = firstEl.nextElementSibling;
    // 获取上一个兄弟节点
    var headSi = lastEl.previousSibling;
    //获取上一个兄弟标签节点
    var head = lastEl.previousElementSibling;
</script>

获取节点坐标位置

这个坐标位置是相对于父元素（事件源）的位置。

标签.offsetLeft
标签.offsetTop

例子

css样式：

.box{
    width: 300px;
    height: 300px;
    background-color: rgb(182, 134, 134);
    position: relative;

}
.small{
    width: 100px;
    height: 100px;
    background-color: aqua;
    position: absolute;
    top: 100px;
    left: 100px;
   
}

html代码：

<body>
    <div class="box">
        <div class="small"></div>
    </div>
    <button>按钮</button>
</body>
<script>
var small = document.querySelector('.small');
var left = small.offsetLeft    //获取距离大div左边的距离  100
var tp = small.offsetTop        //获取距离大div顶部的距离  100
console.log(left, tp);

document.querySelector('button').onclick = function() {
    var timer = setInterval(function() {
        var left = small.offsetLeft    //获取小div的left的位置
        left += 2     //向左一点一点移动
        if(left >= 200) {
            left = 200
            clearInterval(timer)
        }
        small.style.left = left + 'px'
    }, 10)
}
</script>

效果展示：

请添加图片描述

十、获取标签大小

就像是div盒子的宽高。

（包含边框）
标签.offsetWidth 
标签.offsetHight 

不包含边框
标签.clientWidth
标签.clientHeight

十、获取滚动条滚动距离

有文档声明（< !DOCTYPE html>）

document.documentElement.scrollTop
document.documentElement.scrollLeft

没有文档声明

document.body.scrollTop
document.body.scrollLeft

滚动条滚动事件 window.onscroll

//判断滚动条是否移动
兼容写法：var t= document.documentElement.scrollTop || document.body.scrolTop

十二、短路运算

短路运算就是一种赋值操作（|| 、&&参与）,将连接的两个值经过判断选择其中一个赋值给变量。

var c = 0 && 1
console.log(c);  //输出 0

var a= 0 || true;
var b= '' || flase
console.log(a)   //true
console.log(b)	 //false

十三、易混点

窗口大小，标签位置坐标，标签大小，滚动条滚动距离，鼠标位置（在事件中的，提前拿上来）。

我在做一个练习时也被搞得有点乱，所以就拿出总结记忆一下（细细对比，认真理解）。

获取标签位置：标签.offsetLeft 、标签.offsetTop

获取标签大小：

包含边框：标签.offsetWidth / offsetHeight

不包含边框：标签.clientWidth / clientHeight

窗口（浏览器）大小：

包含滚动条：window.innerWidth / innerHeight

不包含滚动条：document.documentElement.clientWidth / clientHieht

获取body大小：document.body.clientWidth / clientHeight

滚动过的距离：

有文档声明：document.documentElement.scrollTop /scrollLeft

没有文档声明：document.body.scrollTop /scrollLeft

获取鼠标的位置：

相对于事件源（相当于div中）：事件对象.offsetX /offsetY
相对于浏览器窗口：事件对象.clientX / clientY
相当于整个页面（html）：事件对象.pageX /pageY
`

等了很久才写完，本来在星期六就可以写完，咳咳因为种种阻挠。这篇可能总结的不到位，主要是DOM，对网页文档的操作；哪里有错，请及时私信我修改，加油。

在这里插入图片描述