电商网站制作方案,做外贸网站一定要会英语吗,类似wordpress的软件,珠海专业机械网站建设说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ 访问元素节点 认识document对象 访问元素节点的常用方法✨ getElementById()✨ 延迟运行✨ getElementsByTagName()✨ getElementsByClassName()✨ querySelector()✨ querySelectorAll() ⭐ 访问元素节点 所谓“访问”元素节点就是指“得到”、“获取”页面上的元素节点 对节点进行操作第一步就是要得到它 访问元素节点主要依靠document对象 认识document对象 document对象是DOM中最重要的东西几乎所有DOM的功能都封装在了document对象中 document对象也表示整个HTML文档它是DOM节点树的根 document对象的nodeType属性值是9 访问元素节点的常用方法
方法功能兼容性document.getElementById()通过id得到元素IE6document.getElementsByTagName()通过标签名得到元素数组IE6document.getElementsByClassName()通过类名得到元素数组IE9document.querySelector()通过选择器得到元素IE8部分兼容IE9完全兼容document.querySelectorAll()通过选择器得到元素数组IE8部分兼容IE9完全兼容
✨ getElementById() getElementById()方法通过id得到元素节点 示例代码
bodydiv idbox/divp idpara/pscript//访问/获取元素节点var oBox document.getElementById(box); //注意括号里的大小写字母也要匹配var oPara document.getElementById(para);/script
/body注意事项 如果页面上有相同的元素则只能得到第一个所以页面上不要出现相同id的元素不管元素藏的有多深都可以找到 ✨ 延迟运行 在测试DOM代码时通常JS代码一定要写到HTML节点的后面否则JS无法找到相应HTML节点 但是也可以使用window.onload function(){}事件使页面加载完毕后再执行指定的代码原理就是给window窗口对象添加一个onload事件onload表示加载完即给窗口添加了一个全都加载完的事件监听等页面加载完后再执行function里面的方法 示例代码
body!--下方的代码中script标签放在了最上方--script//给window对象添加onload事件监听window.onload function () {//访问/获取元素节点var oBox document.getElementById(box);var oPara document.getElementById(para);console.log(oBox);console.log(oPara);}/scriptdiv idbox/divp idpara/p
/body
/html很多公司会习惯将script标签放到head里面这样写也需要加上“延时运行”来保证js代码在页面加载完毕后运行。
✨ getElementsByTagName() getElementsByTagName()方法通过标签名得到节点数组 数组方便遍历从而可以批量操控元素节点 即使页面上只有一个指定标签名的节点也将得到长度为1的数组 任何一个节点元素也可以调用getElementsByTagName()方法从而得到其内部的某种类的元素节点 示例代码
bodydiv classbox1p我是段落/pp我是段落/pp我是段落/pp我是段落/p/divdiv classbox2p我是段落/pp我是段落/pp我是段落/pp我是段落/p/divscriptvar oPs document.getElementsByTagName(p); //得到页面中的所有p标签console.log(oPs);/script
/body如果想要得到指定盒子内的p标签可以这样写
bodydiv idbox1p我是段落/pp我是段落/pp我是段落/pp我是段落/p/divdiv idbox2p我是段落2/pp我是段落2/pp我是段落2/pp我是段落2/p/divscript//先得到box2var box2 document.getElementById(box2);//再得到box2中的p标签var ps_inbox2 box2.getElementsByTagName(p);console.log(ps_inbox2);/script
/body✨ getElementsByClassName() getElementsByClassName()方法通过类名得到节点数组 getElementsByClassName()方法从IE9开始兼容 某个节点元素也可以调用getElementsByClassName()方法从而得到其内部的某类名的元素节点 ✨ querySelector() querySelector()方法是通过选择器得到元素括号中直接写选择器就可以了 querySelector()方法只能得到页面上一个元素如果有多个元素符合条件则只能得到第一个元素 querySelector()方法从IE8开始兼容但从IE9开始支持CSS3的选择器如:nth-child()、:[src^‘husky’]等css3选择器形式都支持良好 示例代码
bodydiv classboxp我是段落1/pp我是段落2/pp idpara我是段落3/pp我是段落4/p/divscript//得到classbox中idpara的p标签var p document.querySelector(.box #para);console.log(p);/script
/body✨ querySelectorAll() querySelectorAll()方法是通过选择器得到元素数组括号中写选择器 即使页面上只有一个符合选择器的节点也将得到长度为1的数组 示例代码
bodydiv classboxp我是段落1/pp我是段落2/pp idpara我是段落3/pp我是段落4/p/divscript//得到classbox中的p标签var ps document.querySelectorAll(.box p);console.log(ps);//得到了数组自然也可以选择其中的某一项了console.log(ps[2])/script
/bodyquerySelector() 和 querySelectorAll() 是在实际工作中非常常用的获得节点的方法。
