东莞网站建设什么价格便宜,h5建站工具,做的网站必须放在idc机房吗,网络营销外包专员通过ID名获取元素#xff08;getElementById#xff09; 上下文必须是document 必传参数#xff0c;参数string类型 返回值#xff1a;是一个元素对象#xff0c;即当前id的对象#xff08;如果页面上没有你所获取的id#xff0c;则返回null#xff09; document.getEl…通过ID名获取元素getElementById 上下文必须是document 必传参数参数string类型 返回值是一个元素对象即当前id的对象如果页面上没有你所获取的id则返回null document.getElementById(id)!DOCTYPE html
htmlheadmeta charsetutf-8/headbodydiv iddiv_box/div/bodyscript typetext/javascriptconsole.log(document.getElementById(div_box));/script
/html通过name属性的值获取元素getElementsByName 上下文必须是document 必传参数参数是获取元素的name属性 返回值是一个伪数组页面上没有对应标签的时候返回空数组 不推荐使用在IE和欧朋浏览器中通过这个方式会获取到相同的id元素 document.getElementsByName(name)
!DOCTYPE html
htmlheadmeta charsetutf-8/headbodyinput typecheckbox namehobby valuejsJavaScript/bodyscript typetext/javascriptconsole.log(document.getElementsByName(hobby));/script
/html通过标签名获取元素getElementsByTagName 上下文可以是document也可以是一个元素元素必须存在 参数是获取元素的标签名属性不区分大小写 返回值是一个伪数组页面上没有对应标签的时候返回空数组 document.getElementsByTagName(p)
!DOCTYPE html
htmlheadmeta charsetutf-8/headbodyp/pdiv/div/bodyscript typetext/javascriptconsole.log(document.getElementsByTagName(div));console.log(document.getElementsByTagName(p));/script
/html通过类名获取元素getElementsByClassName 上下文可以是document也可以是一个元素 参数是元素的类名 返回值是一个伪数组页面上没有对应标签的时候返回空数组 document.getElementsByClassName(class)
!DOCTYPE html
htmlheadmeta charsetutf-8/headbodydiv classclass/div/bodyscript typetext/javascriptconsole.log(document.getElementsByClassName(class));/script
/html获取html标签document.documentElement document.documentElement是专门获取html这个标签的 !DOCTYPE html
htmlheadmeta charsetutf-8/headbody/bodyscript typetext/javascriptconsole.log(document.documentElement);/script
/html获取body标签document.body document.body是专门获取body这个标签的 !DOCTYPE html
htmlheadmeta charsetutf-8/headbody/bodyscript typetext/javascriptconsole.log(document.body);/script
/html
通过选择器获取一个元素document.querySelector 上下文可以是document也可以是一个元素 参数是选择器如div 、.className 返回文档中匹配指定的选择器组的第一个元素 document.querySelector(“选择器”)
!DOCTYPE html
htmlheadmeta charsetutf-8/headbodydiv classdiv_box/div/bodyscript typetext/javascriptconsole.log(document.querySelector(.div_box));console.log(document.querySelector(div.div_box));/script
/html通过选择器获取一组元素document.querySelectorAll 上下文可以是document也可以是一个元素 参数是选择器如div 、.className 返回文档中匹配指定的选择器组的所有元素 返回值是一个伪数组 document.querySelectorAll(“选择器”)
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodydiv classdiv_box/div/bodyscript typetext/javascriptconsole.log(document.querySelectorAll(.div_box));console.log(document.querySelectorAll(div.div_box););/script
/html通过子元素获取父节点parentNode 子元素.parentNode !DOCTYPE html
htmlheadmeta charsetutf-8/headbodydiv idparentdiv idchild/div/div/bodyscript typetext/javascriptconsole.log(document.getElementById(child).parentNode);/script
/html
通过父元素获取全部子节点childNodes 父元素.children 获取到的是一个伪数组使用的时候需要加上下标指定子元素 !DOCTYPE html
htmlheadmeta charsetutf-8/headbodydiv idparentb idchild/bb idchild2/b/div/bodyscript typetext/javascript//获取parent下全部的子节点console.log(document.getElementById(parent).childNodes);//获取parent下第一个子节点console.log(document.getElementById(parent).firstChild);//获取parent下最后一个子节点console.log(document.getElementById(parent).lastChile);//获取parent上一个兄弟节点console.log(document.getElementById(parent).previousSibling);//获取parent下一个兄弟节点console.log(document.getElementById(parent).nextSibling);//拷贝一个列表项到另外一个列表console.log(document.getElementById(parent).cloneNode());/script
/html
获取元素的属性getAttribute
元素对象.getAttribute(“属性”)
//获取元素的高度属性
let height document.getElementById(div_box).getAttribute(height);
设置元素的属性setAttribute
元素对象.setAttribute(属性,属性值)
let height document.getElementById(div_box).setAttribute(style,width: 100px;height: 100px;);
