计算机网站建设是什么,专业做网站建,打电话推销好还是做网站推广好,长沙微信营销公司一、document获取元素
1. 方法
document.getElementById(‘box’) // 在IE8及以下是不分大小写的#xff0c;而且name值也能匹配上document.getElementsByClassName(’’) // IE8及以下是用不了的document.getElementsByTagName() 都兼容document.getElementsByName() 用的非…一、document获取元素
1. 方法
document.getElementById(‘box’) // 在IE8及以下是不分大小写的而且name值也能匹配上document.getElementsByClassName(’’) // IE8及以下是用不了的document.getElementsByTagName() 都兼容document.getElementsByName() 用的非常少返回的是类数组对象可用下标访问没有数组方法 企业级开发一般不使用id获取元素id一般用在后端返回数据注入 querySelector/querySelectorAll // 这是HTML5新引入的WEB API但是IE7就已经支持
var div1document.querySelector(div);
var div1document.querySelector(.text);
var div1document.querySelector(div p);
var div1document.querySelector(div p);
var div1document.querySelector(#box);优势 兼容好只能选取第一个元素()中的选择写法和css选择器一样div p表示选择直系元素div p表示找子集元素 缺点 有性能问题企业开发一般不用不是实时的 var divsdocument.querySelectorAll(div);
console.log(divs);//[div,div,div]
divs[0].remove();
console.log(divs);//[div,div,div] 不是实时的二、遍历节点元素树
1. 元素节点树 2. 节点树访问
节点包含元素
ullih2我是标题标签/h2a href我是超链接标签/ap我是段落标签/p/li/ulparentNode属性父节点
html → document → null直到document为止document没有parentNodenullhtml有父节点但是没有父元素
childNodes元素…
换行也是一个文本节点
ulli!--注释--h2我是标题标签/h2a href我是超链接标签/ap我是段落标签/p/li/ul
var lidocument.getElementsByTageName(li)[0];
console.log(li.childNodes.length);//输出9节点属性 元素节点1 属性节点2 文本节点(text)3 注释节点(comment)8 document9 DocumentFragment11 firstChild/lastChild
元素内第一个节点/元素内最后一个节点
var lidocument.getElementsByTageName(li)[0];
console.log(li.lastChild);//#textnextSibling/previousSibling
元素的兄弟节点
var pdocument.getElementsByTageName(p)[0];
console.log(p.previousSibling);//#textparentElement属性 IE9及以下不支持
html → nullhtml有父节点但是没有父元素
children IE7及以下不支持元素only childElementCountchildren.length(IE9不支持) 子元素的个数
firstElementChild/lastElementChildIE9及以下不支持 nextElementSibling/previousElementSiblingIE9及以下不支持 小结
企业级开发使用兼容性好的getElementsByTagNameparentNodechildNodes重新封装来获取子元素
