获取h5的id属性_js：获取元素的值（id、标签、html5新增、特殊元素的获取）

1、根据id获取

(1)getElementById() 方法

获取元素

console.log(uname);

console.log(typeofuname);

}

2020-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/test20200630/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:"2020-07-22"innerText:"2020-07-22"inputMode:""isConnected:trueisContentEditable:falselang:""lastChild: text

lastElementChild:nulllocalName:"div"namespaceURI:"http://www.w3.org/1999/xhtml"nextElementSibling: iframe#blockbyte-bs-sidebar.notranslate

2、根据标签获取

(1)根据标签获取元素

获取元素

console.log(list);for(var i inlist){

console.log(list[i]);

}

}

2020-07-22

2020年7月23日08:58:28

2020年7月23日08:58:35

2020年7月23日08:58:43

2020年7月23日08:58:46

返回带有指定标签名的对象集合

(2)返回标签内的元素

获取元素

console.log(testli);

}

• 2020年7月23日09:15:55
• 2020年7月23日09:16:02
• 2020年7月23日09:16:08

3、html5新增的获取方法

(1)根据类名获取

获取元素

console.log(boxs);

}

1

2

(2)querySelector

获取元素

console.log(box);

}

1

2

只能返回指定选择器的第一个对象，id选择器用#，类加点

(3)querySelectorAll

获取元素

console.log(boxs);

}

1

2

只能返回指定选择器的所有对象，id选择器用#，类加点

4、获取特殊元素

(1)获取body元素和html元素

获取元素

console.log(bodyTest);

console.log(htmlTest);

}

1

2