js 之获取DOM元素

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

这一篇复习原生 JS 获取 DOM 的一些方法,手敲不易 麻烦各位看官老师顺手点个赞,抱拳了!!!

document.getElementById();

• 参数: id名
• 作用: 根据id名获取dom元素对象
• 返回值: 如果id名相同获取第一个
• 提示: getElenmentById 上下文必须是document

let box = document.getElementById('box');
console.log(box);

document.getElementByName();

• 参数: name 属性名获取元素
• 作用: 根据name 属性名获取元素
• 返回值: 获取的元素

let myspan = document.getElementByName('ap');
console.log(myspan);

document.getElementsByClassName();

• 参数class名
• 根据class名获取元素
• 返回值: 获取的元素

let mybox = document.getElementsByClassName('box')
console.log(mybox);

context.getElementsByTagName();

• 参数: 标签名
• 提示: 上下文可以是document，也可以是一个元素，注意这个元素一定要存在
• 返回值: 获取根据上述id元素的所有标签名子元素集合
• 提示: dom子元素集合是类数组有 length 有索引
• 提示: context 不是固定的取决你想获取那个元素下的指定标签子元素集合,,那个元素就是 context

let myli = box.getElementByTagName('li');
console.log(myli);

context.getElementByClassName()

• 参数: class 名字
• 提示: 上下文可以是document，也可以是一个元素，注意这个元素一定要存在
• 返回值: 根据对应元素获取元素下的class集合

let myBox = box.getElementByClassName('myp');
let myChild = document.getElementByClassName(myDiv);
console.log(myBox);
console.log(myChild);

document.querySelector();

• 参数: 选择器 如: div.className
• 提示: 上下文可以是document,也可以是元素,注意这个元素一定要存在
• 返回值: 获取的第一个元素

        let box = document.getElementById('box')
        console.log(box);
        let myspan = box.querySelector('.ap');
        console.log(myspan);

document.querySelectorAll()

• 参数: 选择器 如: div.className
• 提示: 上下文可以是document,也可以是元素,注意这个元素一定要存在
• 返回值: 获取的所有元素 一个类数组

        let box = document.getElementById('box');
        let myspan2 = box.querySelectorAll('.ap');
        let myspan3 = document.querySelectorAll('.ap');
        console.log(box);
        console.log(myspan2);
        console.log(myspan3);