JS之DOM对象常用知识点整理_m0_53157173

大大的周 02-07 5328

JS之DOM对象常用知识点整理 DOM树的介绍获取元素对象的四种方式通过元素ID获取对应元素对象---getElementByid();通过name属性获取所有需要的对象---getElementsByname()通过标签名获取符合要求的所有元素通过class属性获取所有符合要求的元素获取节点对象的注意事项元素对象常见属性value属性className属性checked属性innerHtml属性

DOM树的介绍

获取元素对象的四种方式

通过元素ID获取对应元素对象—getElementByid();

代码演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> </head> <body> <input type="text" id="001"/> <script> var t1=document.getElementById("001"); alert(t1); </script> </body> </html>

注意: 可以通过ID获取对应元素的对象，如果找不到返回null

通过name属性获取所有需要的对象—getElementsByname()

注意:这里返回的是一个元素节点对象的数组,如果找不到对应的对象，返回一个空数组

代码演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> </head> <body> <input type="checkbox" name="hobby" value="read"/> <input type="checkbox" name="hobby" value="gym"/> <input type="checkbox" name="hobby" value="paly"/> <script> var arr=document.getElementsByName("hobby"); alert(arr.length); </script> </body> </html>

通过标签名获取符合要求的所有元素

代码演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> </head> <body> <ul> <li>java</li> <li>c++</li> <li>c</li> <li>html</li> </ul> <script> var arr=document.getElementsByTagName("li"); alert(arr.length); </script> </body> </html>

通过class属性获取所有符合要求的元素

代码演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> </head> <body> <input type="radio" name="sex" value="man" class="h1"> <input type="radio" name="sex" value="woman" class="h1"> <script> var arr=document.getElementsByClassName("h1"); alert(arr.length); </script> </body> </html>

获取节点对象的注意事项

获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中

反例演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> </head> <script> var arr=document.getElementsByClassName("h1"); alert(arr.length); </script> <body> <input type="radio" name="sex" value="man" class="h1"> <input type="radio" name="sex" value="woman" class="h1"> </body> </html>

元素对象常见属性 value属性

修改元素的值代码演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> </head> <body> <input type="text" id="t1" value="你好">; <script> var t1=document.getElementById("t1"); //修改value属性值 t1.value="大忽悠"; </script> </body> </html>

className属性

修改元素的样式

注意:class在JS中是关键字，因此使用className，绕开代码演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> <style> .ys1{ color: red; } .ys2{ color: blue; } </style> </head> <body> <span id="s1" class="ys1">我是一个大忽悠</span> <script> var s1=document.getElementById("s1"); s1.className="ys2"; </script> </body> </html>

checked属性

代码演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> </head> <body> <input type="checkbox" id="hobby"/> <script> var c=document.getElementById("hobby"); alert(c.checked); //让复选框默认选中 c.checked=true; </script> </body> </html>

innerHtml属性

代码演示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大忽悠个人主页</title> </head> <body> <span id="s1">你叫什么名字</span> <script> //获取span标签的内容体 var s1=document.getElementById("s1"); alert(s1.innerHTML); //设置span标签的内容体 s1.innerHTML="我叫大忽悠"; //向span标签，追加内容体信息 s1.innerHTML+="我是傻逼"; </script> </body> </html>

注意:字符串后面追加内容，要用+=