dom对象常⽤的属性和⽅法有哪些？
dom对象常⽤的属性和⽅法有哪些？
⼀、总结
⼀句话总结：
1、document属性和⽅法：document的属性有head，body之类，⽅法有各种获取element的⽅法
2、element的属性和⽅法：属性⽐如style，innerHTML和固有属性，⽅法⽐如各种动态操作元素，⽐如createElement，还有操作属性的set、get、remove、create解Attribute
3、attribute的属性和⽅法：有点包含在element⾥⾯的感觉
1、我们熟知location是window的属性或者说对象，那么document对象有location属性么？
解答：window有location对象，document同样有location对象，
2、如何获取⼀个html的⽂档声明？
解答：document.doctype;//可以知道⽂档声明，如果没有return null；这⾥是<!DOCTYPE html>
3、⼀个有如下 <!DOCTYPE html>⽂档声明的html⽂档，它的⽂档声明的名字是什么？
解答：html
4、如何获取⼀个html的head部分？
解答：document.head//很明显选取head节点.就是<head></head>这段
5、如何获取⼀个html的body部分？
解答：document.body//选取body节点.
6、如何获取⼀个⽂档的⽂档声明的名字？
解答：document.doctype.name//知道⽂档声明的名字.
7、document的location属性是来⼲嘛的？
解答：ocation⼀般主要是⽤来获取地址。
8、如何获取⼀个⽂档当前的地址？
解答：document.location.href//获取当前地址
9、给⽂档重新分配地址的三种⽅法是哪三种？
10、innerText和innerHTML的区别是什么（两点区别）？
解答：⼀个是获取⽂本，⼀个是获取标签。 innerText是IE特有，innerHTML则是符合W3C协议的。
11、innerText⾥⾯的标签还是标签么？
解答：不是，已经转义为了⽂本。
12、element常⽤的⼏个属性是哪⼏个？
解答：id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing
13、如何通过DOM2⽅法获取⼀个标签？
解答：var d=document.querySelector("#p1");
14、DOM2获取⼀个标签的两个常见⽅法是哪两个？
解答：querySelector和querySelectorAll
15、querySelector和querySelectorAll和区别是什么？
解答：前者获取⼀个，后者获取所有对应标签的。
16、如何在body中把b标签插⼊到a标签之前？
解答：document.body.insertBefore(b,a);//把b插在a前⾯- - 17、
17、insertBefore除了成为普通元素的⽅法，可否成为body的⽅法？
解答：肯定可以啊
18、在body中⽤c标签替换b标签怎么实现？
解答：placeChild(c,b);//（new,old）
19、属性操作的四个⽅法是哪四个？
解答：set，get，create，remove，后⾯分别接Attribute
20、DOM0点击事件怎么写？
解答：a.onclick=function(){}
21、DOM2点击事件怎么写？
解答：btn.addEventListener("click",fun,false)
22、DOM2中主要操作事件的两个⽅法是哪两个？
解答：add和remove接EventListener
23、btn.addEventListener("click",fun,false)中的第三个参数是什么意思？
解答：如果是true 就是在事件捕获阶段调⽤，如果是false则是在事件冒泡阶段调⽤。
24、这样⽤removeEventListener("click",function(){})有效果么？
解答：这样是没有效果的。虽然是⼀个函数，但是JS会认为传⼊了⼀个另外⼀个函数，虽然和之前⼀个⼀模⼀样。
25、IE事件调⽤的⽅法是什么？
解答：IE⽤的是attach的⽅式，a.attachEvent("onclick",function(){}
⼆、dom对象常⽤的属性和⽅法有哪些？
1、DOM对象的⼀些常⽤⽅法：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Z-one</title>
6</head>
7<body>
8<p id="p1" class="p">测试</p>
9<p id="p2" class="p">测试</p>
10<p id="p3" class="p">测试</p>
11</body>
12</html>
以上⾯code为例⼦
（1）、document 对象
a、document对象属性
document.doctype;//可以知道⽂档声明，如果没有return null；这⾥是<!DOCTYPE html>
document.doctype.name//知道⽂档声明的名字.
document.head//很明显选取head节点.就是<head></head>这段
document.body//选取body节点.
b、location
我记得location⼀般主要是⽤来获取地址。
常⽤⽅法：
1 document.location.href//获取当前地址
2 document.location.assign(www.baidu)//分配⼀个地址
3另外如果href 是获取当前地址，如果给他赋值，把⼀个地址给他，也能达到assign的效果；
4 document.location="www.baidu"
5或者
6 document.location.href="www.baidu"
> innerText，innerHTML;
这⼆个放⼀起说，主要是都挺像的，这两个的作⽤都是往⽂档中写出内容，但是区别主要是：
document.body.innerText("Z-ONE") 主要是写⼊⼀个纯⽂本内容，此时<span>并不是标签。⽽是⼀个⽂本"<span>".(其实这样也显得innerText的安全性⾼⼀点)
document.body.innerHTML("z-one")也是写⼊⼀个纯⽂本内容，但是不会将HTML标签进⾏转义。
另外innerHTML是符合W3C协议的，⽽innerText只适⽤于IE浏览器。
c、Element元素
Element的⼏个必要重要的属性感觉常⽤的就是：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Z-one</title>
6</head>
7<body>
8<p id="p1" class="p">测试</p>
9<p id="p2" class="p">测试</p>
10<p id="p3" class="p">测试</p>
11<script>
12var ElementById("p1")//获取上⾯那个例⼦的p1元素.
13 a.id// 获取该元素的id... "p1" (貌似就是通过p1到的他- -)
14 a.nodeName//获取到节点的名字(就是标签名字) 这⾥是"p"
15 a.className//获取节点的class名字，这⾥因为关键字的原因，只能⽤className;
16另外还有⼀些
17 child//获取⼦元素这⾥没有
18 lastchild//最后⼀个⼦元素.
19 firstchild//第⼀个⼦元素.
20 nextSibling//下⼀个兄弟元素.
21 previousSibing//上⼀个兄弟元素.
22</script>
23</body>
24</html>
获取元素的⽅法
获取元素的⽅法主要有三种：
通过ID
通过类名
通过元素种类
*(针对于input元素通过分组名字)
通过DOM2的⽅法
下⾯这个例⼦很好表⽰了获取元素的⼏种⽅法
1 <p id="p1" class="p">测试</p>
2<p id="p2" class="p">测试</p>
3<p id="p3" class="p">测试</p>
4</body>
5<script>
6 load=function(){
7//⽤id获取第⼆个p标签的元素
8var ElementById("p2");
9 lor="red";
10//⽤标签名字来获取第⼀个p标签;
11var ElementsByTagName("p")[0]//获取的是⼀个集合,
12 b.style.fontSize="30px";//这⾥font-size，会报错，就⽤fontSize;
13//⽤类名来获取第三个标签.
14var ElementsByClassName("p")[2]//和上⾯⼀个道理
15 c.style.fontWeight="bold";
16//通过DOM2的⽅法获取第1个标签;
17var d=document.querySelector("#p1");
18//如果是queryselectorAll() 就是获取⼀个集合，操作⽅式和上⾯类似。
19//这⾥是通过类名，如果是ID就⽤#p1 标签就⽤p,⼀般是获取第⼀个元素.这点和Tag和Class都不⼀样
20 lor="green";
21 }
然后就是Element的创建和添加元素。⽤⼀个例⼦表⽰吧：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>创建元素</title>
6</head>
7<script>
8 load=function(){
9var ateElement("div");
10 a.className="p1"
11 a.innerHTML=("<span>测试下</span>");
12//添加到⽂档中
13 document.body.appendChild(a);//这下⼦元素就写进去了
14//如果还要添加可以照着上⾯来，我们现在就添加⼀个元素进去
15var ateElement("div");
16 b.innerHTML="<p>测试第⼆弹</p>";
17//这次我们添加在上⼀个元素前⾯
18 document.body.insertBefore(b,a);//把b插在a前⾯- -
19//这时候不想要b了，想替换掉，可以这么做!
20var ateElement("div");
21 c.innerHTML="我就是来替换的";
22 placeChild(c,b);//（new,old）
23 }
html document是什么24</script>
25<body>
26
27</body>
28</html>
> 属性操作
Element的属性操作⼀般就下⾯四种：
getAttribute 获取⼀个属性。
setAttribute 设置⼀个属性。
removeAttribute 删除⼀个属性。
createAttribute 新建⼀个属性。
举个例⼦吧
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>获取属性</title>
6</head>
7<body>
8<div id="x1" class="p1"></div>
9</body>
10<script>
11var ElementById("x1");
12 a.getAttribute("id");//获取该阶段的属性：id
13 a.setAttribute("id","Z-one");//设置⼀个属性。
14 a.removeAttribute("id")//删除ID节点
15</script>
2、事件处理
（1）、DOM0级事件处理
还是⽤⼀个例⼦说明：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Document</title>
6</head>
7<body>
8<input type="button" id="a" value="按钮">
9</body>
10<script>
11var ElementById("a");
12 a.onclick=function(){
13 console.log("测试⼀下");
14 }
15//这样点击按钮就会在控制台输出测试⼀下
16</script>
这⼀种应该算是⽐较常见的⼀种操作⽅式。没什么好说的。我们看下⾯
（2）、DOM2级事件处理程序
这⾥前⾯区别开来，就是我是你的升级版！。出了这两个⽅法
addEventListener();//添加
removeEventListener();//去除
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>DOM2级</title>
6</head>
7<body>
8<input type="button" value="按钮">
9</body>
10<script>
11var fun=function(){
12 console.log("测试⼀下");
13 }
14var btn=document.querySelector("input");
15 btn.addEventListener("click",fun,false)
16 veEventListener("click",fun,false)
17//如果是true 就是在事件捕获阶段调⽤，如果是false则是在事件冒泡阶段调⽤。
18//另外如果这⾥要⽤removeEventListener("click",function(){})//这样是没有效果的。虽然是⼀个函数，但是JS会认为传⼊了⼀个另外⼀个函数，虽然和之前⼀个⼀模⼀样。19</script>
20</html>
（3）、IE事件调⽤
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>IE事件调⽤</title>
6</head>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论