企业官网建设流程全解析

流媒体网站开发教程,学网校app下载,wordpress开发官网,最吸引人的广告图片文章目录一.根据 ID 获取( getElementById )二.根据类名获取( getElementsByClassName )三.根据标签名获取( getElementsByTagName )四.根据选择器获取( querySelector / querySelectorAll )1.querySelector2.querySelectorAll五.获取表单元素( getElementsByName )六.获取特殊…文章目录一.根据 ID 获取( getElementById )二.根据类名获取( getElementsByClassName )三.根据标签名获取( getElementsByTagName )四.根据选择器获取( querySelector / querySelectorAll )1.querySelector2.querySelectorAll五.获取表单元素( getElementsByName )六.获取特殊元素( 文档 / body / 头部 )注意事项总结原生方法无需依赖任何库,是最基础且高效的方式,主要通过document对象提供的 API 实现.一.根据 ID 获取( getElementById )作用: 通过元素的id属性获取唯一的 DOM 元素(因为id在文档中应唯一).语法:document.getElementById(id值)返回值: 匹配的 DOM 元素对象,若不存在则返回null.// HTML: div idboxHello/divconstboxdocument.getElementById(box);console.log(box);// div idboxHello/div二.根据类名获取( getElementsByClassName )作用: 通过元素的class属性获取所有匹配的元素集合(HTMLCollection,类数组对象).语法:document.getElementsByClassName(类名)返回值: 包含所有匹配元素的 HTMLCollection,若不存在则返回空集合.// HTML: div classitem1/divdiv classitem2/divconstitemsdocument.getElementsByClassName(item);console.log(items);// HTMLCollection(2) [div.item, div.item]console.log(items[0]);// 取第一个元素: div classitem1/div三.根据标签名获取( getElementsByTagName )作用: 通过元素的标签名(如div、p、ul)获取所有匹配的元素集合(HTMLCollection).语法:document.getElementsByTagName(标签名)返回值: 包含所有匹配元素的 HTMLCollection,若不存在则返回空集合.// HTML: p文本1/pp文本2/pconstparasdocument.getElementsByTagName(p);console.log(paras.length);// 2四.根据选择器获取( querySelector / querySelectorAll )这是最灵活的方式,支持 CSS 选择器语法,是现代开发中最常用的方法.1.querySelector作用: 获取第一个匹配 CSS 选择器的 DOM 元素.语法:document.querySelector(选择器)返回值: 第一个匹配的元素对象,若不存在则返回null.// HTML: div classitem1/divdiv classitem2/divconstfirstItemdocument.querySelector(.item);// 类选择器constboxdocument.querySelector(#box);// ID 选择器constpdocument.querySelector(ul li: first-child);// 复杂 CSS 选择器2.querySelectorAll作用: 获取所有匹配 CSS 选择器的元素集合(NodeList,类数组对象).语法:document.querySelectorAll(选择器)返回值: 包含所有匹配元素的 NodeList,若不存在则返回空集合.// HTML: div classitem1/divdiv classitem2/divconstallItemsdocument.querySelectorAll(.item);console.log(allItems);// NodeList(2) [div.item, div.item]// 可通过 forEach 遍历(NodeList 支持 forEach,HTMLCollection 不支持)allItems.forEach((item)console.log(item));五.获取表单元素( getElementsByName )作用: 通过元素的name属性获取元素(主要用于表单元素,如input、select).语法:document.getElementsByName(name值)返回值: NodeList 集合.// HTML: input typetext nameusernameconstusernamedocument.getElementsByName(username)[0];// 取第一个匹配元素六.获取特殊元素( 文档 / body / 头部 )// 获取 html 根元素consthtmldocument.documentElement;// 获取 body 元素constbodydocument.body;// 获取 head 元素constheaddocument.head;注意事项获取时机: 必须等待 DOM 加载完成后再获取元素,否则可能返回null.解决方式:将脚本放在body底部;使用DOMContentLoaded事件:document.addEventListener(DOMContentLoaded,function(){// 在这里获取元素});集合类型:getElementsByClassName/getElementsByTagName返回HTMLCollection(动态集合,DOM 变化会实时更新);querySelectorAll/getElementsByName返回NodeList(静态集合,DOM 变化不会更新);两者都是类数组对象,可通过Array.from()或扩展运算符转为真正的数组:constitemsdocument.querySelectorAll(.item);constitemsArrArray.from(items);// 转为数组性能:getElementById是最快的获取方式(因为 ID 唯一),其次是querySelector,复杂选择器的性能略低,但在现代浏览器中差异可忽略.总结原生 JavaScript 中,querySelector/querySelectorAll因支持 CSS 选择器而最常用,灵活性最高;简单场景(如按 ID 获取)用getElementById更高效;框架中优先使用其提供的选择器语法,简化代码.