web前端-javascript常用的document对象使用详解

女爷i 2022-12-24 04:54 130阅读 0赞

### js的dom对象 ###

*  什么是dom对象
 *  对象模型
 *  常用API
 *  常用属性

# 什么是dom对象 #

1.dom对象又称document对象  
2.每个载入浏览器的 HTML 文档都会成为 Document 对象。  
3.Document 对象使我们可以从脚本中（如js）对 HTML 页面中的所有元素进行访问，操控。  
4.Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

# 对象模型 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3Njk5MDc2_size_16_color_FFFFFF_t_70_pic_center]

# 常用API #

1）document.getElementsByClassName ( “class”)  
返回集 htmlcollection ,用法和数组一致  
说明: class为DOM元素上class属性的值

2）document.getElementById( “id” )  
功能:返回对拥有指定ID的第一个对象的引用  
返回值: DOM对象  
说明: id为DOM元素上id属性的值

3)document.getElementsByName(" name");  
返回的是nodelist 类型, 用法和数组一致  
说明: name为DOM元素上name属性的值

# 常用属性 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3Njk5MDc2_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3Njk5MDc2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/cdd32d78bcc94c478c6fede984b106f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3Njk5MDc2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210318204757714.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3Njk5MDc2,size_16,color_FFFFFF,t_70