1、根据id获取
(1)getElementById() 方法
获取元素
console.log(uname);
console.log(typeofuname);
}
-07-22
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
参数id大小写敏感
返回的是一个元素的对象
(2)console.dir
window.onload =function() {var uname = document.getElementById("myname");
console.log(uname);
console.log(typeofuname);
console.dir(uname);
}
console.dir能够返回详细信息：
attributeStyleMap: StylePropertyMap
size:0__proto__: StylePropertyMap
attributes: NamedNodeMap {0: id, id: id, length: 1}
autocapitalize:""autofocus:falsebaseURI:"http://127.0.0.1:8020/test2030/test.html?__hbt=1595464777990"childElementCount:0childNodes: NodeList [text]
children: HTMLCollection []
classList: DOMTokenList [value:""]
className:""clientHeight:64clientLeft:0clientTop:0clientWidth:900contentEditable:"inherit"dataset: DOMStringMap {}
dir:""draggable:falseelementTiming:""enterKeyHint:""firstChild: text
firstElementChild:nullhidden:falseid:"myname"innerHTML:"-07-22"innerText:"-07-22"inputMode:""isConnected:trueisContentEditable:falselang:""lastChild: text
lastElementChild:nulllocalName:"div"namespaceURI:"/1999/xhtml"nextElementSibling: iframe#blockbyte-bs-sidebar.notranslate
2、根据标签获取
(1)根据标签获取元素
获取元素
console.log(list);for(var i inlist){
console.log(list[i]);
}
}
-07-227月23日08:58:287月23日08:58:357月23日08:58:437月23日08:58:46
返回带有指定标签名的对象集合
(2)返回标签内的元素
获取元素
console.log(testli);
}
7月23日09:15:557月23日09:16:027月23日09:16:08
3、html5新增的获取方法
(1)根据类名获取
获取元素
console.log(boxs);
}
12
(2)querySelector
获取元素
console.log(box);
}
12
只能返回指定选择器的第一个对象，id选择器用#，类加点
(3)querySelectorAll
获取元素
console.log(boxs);
}
12
只能返回指定选择器的所有对象，id选择器用#，类加点
4、获取特殊元素
(1)获取body元素和html元素
获取元素
console.log(bodyTest);
console.log(htmlTest);
}
12
