DOM是w3c的标准
DOM定义了访问HTML和XMXL文档的标准
w3cDOM标准被分为3个不同的部分:
1.核心DOM:针对任何结构化的标准模型
2.XMLDOM:针对HTML文档的标准模型
3.HTML DOM:针对HTML文档的标准模型
获取Element对象
获取:使用Document对象获取
- <body>
- <img id="light" src="../img//三只松鼠.jpg"><br>
- <div class="cls">CSDN</div><br>
- <div class="cls">安徽信息工程学院</div><br>
-
- <input type="checkbox" name="hobby">电影
- <input type="checkbox" name="hobby">旅游
- <input type="checkbox" name="hobby">游戏
- <br>
1.getElementById:使用id属性值获取,返回一个Element对象、
- var img=document.getElementById("light");
- alert(img);
2.getElementByTagName:根据标签名称获取,返回一个Element对象数组
- var divs=document.getElementsByTagName("div");
- alert(divs.length);
3.getElementByName:根据name属性值获取,返回一个Element对象数组
- var hobby=document.getElementsByName("hobby");
- for(let i=0;i<hobby.length;i++){
- alert(hobby[i]);
- }
4.getElement ByClassName:根据class属性值获取,返回Element对象数组
- var clss=document.getElementsByClassName("cls");
- for(let i=0;i<clss.length;i++){
- alert(clss[i]);
- }
常见的Element对象使用
<!--style:设置元素css样式--> <!--innerHTML:设置元素内容-->
- var divs=document.getElementsByTagName("div");
- alert(divs.length);
-
- <!--style:设置元素css样式-->
- <!--innerHTML:设置元素内容-->
- for(let i=0;i<divs.length;i++){
- divs[i].style.color='red';
- divs[i].innerHTML="呵呵";
- }
img.src="../img//小米.jpg"
修改图片的src
其他的可以查阅w3school参考手册JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)