JavaScript API-DOM操作

最新推荐文章于 2024-06-20 14:42:51 发布

KeeneChen

最新推荐文章于 2024-06-20 14:42:51 发布

阅读量345

点赞数 1

分类专栏： Web前端文章标签： javascript css3 html5 vue.js node.js

本文链接：https://blog.csdn.net/qq_43078852/article/details/105933865

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript Api 学习

文章目录

JavaScript Api 学习

1. getElementById 获取元素

// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
	var timer = document.getElementById('time');
	console.log(timer);
	console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
	console.dir(timer);

2. getElementById 获取可返回带有指定标签名的对象的集合

<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>

    </ul>
    <ol id="ol">
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>

    </ol>

    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

3. getElementByClassName 根据类名获取元素

３.1 querySelector 返回指定选择器的第一个元素对象

３.2 querySelectorAll 返回指定选择器的的所有元素对象集合

// 1. getElementsByClassName 根据类名获得某些元素集合
	var boxs = document.getElementsByClassName('box');
	console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
	var firstBox = document.querySelector('.box');
	console.log(firstBox);
	var nav = document.querySelector('#nav');
	console.log(nav);
	var li = document.querySelector('li');
	console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var lis = document.querySelectorAll('li');
    console.log(lis);

4. 获取<body>和<html>标签方法

// 1.获取body 元素
	var bodyEle = document.body;
	console.log(bodyEle);
	console.dir(bodyEle);
// 2.获取html 元素
// var htmlEle = document.html;
	var htmlEle = document.documentElement;
	console.log(htmlEle);

5. 执行事件三要素

点击一个按钮，弹出对话框

事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素
(1) 事件源事件被触发的对象谁按钮

var btn = document.getElementById('btn');

(2) 事件类型如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下
(3) 事件处理程序通过一个函数赋值的方式完成

btn.onclick = function() {
alert('success!');
}

鼠标事件

6. innerText 和 innerHTML的区别

// 1. innerText 不识别html标签 非标准  去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的  可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);

7. 表单属性操作

// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}

8. 通过className更改元素样式

// 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 让我们当前元素的类名改为了 change

// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
// this.className = 'change';
this.className = 'first change';
}