技术文章 | Technical articles

JavaScript源码笔记(第七天)—web前端培训

一、DOM介绍

DOM:Document Object Model  

文档对象模型,用来表示和操作htmlxml文档内容的基础API

当网页被加载时,浏览器会创建对应的文档对象模型,而DOM模型被构造为对象的树(DOM Html Tree 简称DOM,详见资料res

DOM包含了所有的html标签、文本字符串、甚至时html注释。

利用DOM中的属性和方法,使程序有能力动态的访问和更新文档中的内容、结构及样式,这样就使得页面的交互性大大的增强。

DOM节点属性:

nodeName  节点名称

nodeValue   值,只有注释、文本等节点有

nodeType   节点类型

返回的是一个数字  文档document - 9  元素element - 1  属性attribute - 2  文本text - 3

 注释comment-8


 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<ul id="list">

 <li>呵呵<!--这是注释--></li>

10   <li>哈哈</li>

11   <li>嘿嘿</li>

12   <li>嘻嘻</li>

13  </ul>

14 </body>

15 <script type="text/javascript">

16  console.log(document.nodeType);

17 

18  var list = document.getElementById("list");//9

19 

20  console.log("list节点名称:",list.nodeName,'值:',list.nodeValue,'节点类型:',list.nodeType);//list节点名称: UL 值: null 节点类型: 1

21 

22  //获取第一个子元素

23  var li1 = list.firstElementChild;

24  console.log("li1节点名称",li1.nodeName,"值:",li1.nodeValue,"节点类型:",li1.nodeType)//li1节点名称 LI 值: null 节点类型: 1

25  //获取第一个子节点

26  var fc = li1.firstChild;

27  console.log("fc节点名称",fc.nodeName,"值:",fc.nodeValue,"节点类型:",fc.nodeType)//fc节点名称 #text 值: 呵呵 节点类型: 3

28  //获取最后一个子节点

29  var fc2 = li1.lastChild;

30  console.log("fc2节点名称",fc2.nodeName,"值:",fc2.nodeValue,"节点类型:",fc2.nodeType)//fc2节点名称 #comment 值: 这是注释 节点类型: 8

31 </script>

32 </html>

 

二、document对象属性

document.documentElement   获取根元素html

document.body 获取body元素

document.title 获取文档的标题

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document对象属性</title>

</head>

<body>

<ul id="list">

 <li>呵呵<!--这是注释--></li>

10   <li>哈哈</li>

11   <li>嘿嘿</li>

12   <li>嘻嘻</li>

13  </ul>

14 </body>

15 <script type="text/javascript">

16  console.log(document.documentElement);

17  console.log(document.body);

18  console.log(document.title);

19 

20  //浏览器兼容性获取视口宽度和高度

21  var aHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

22  var aWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

23  document.write("视口宽度:" + aWidth + "px"+";高度:"+aHeight + "px");

24 </script>

25 </html>

 

三、获取元素的方法

document.getElementById()   通过id获取元素

docuement.getElementsByTagName()  通过标签名获取元素

document.getElementsByClassName()  通过类名获取元素

后面两个都是获取的类数组,即多个元素

具有length属性,具有索引,通过索引可以获取对应的元素

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document对象属性</title>

</head>

<body>

<ul id="list">

 <li>呵呵<!--这是注释--></li>

10   <li>哈哈</li>

11   <li>嘿嘿</li>

12   <li>嘻嘻</li>

13  </ul>

14 </body>

15 <script type="text/javascript">

16  //通过id获取元素ul

17  var list = document.getElementById('list');

18  console.log("list:",list);

19 

20  // 通过标签名获取所有的li

21  var lis = list.getElementsByTagName('li');

22  console.log(lis);//HTMLCollection(4) [li, li, li, li]  类数组

23 

24  //通过innerHTML可以获取和修改元素内的内容

25  console.log(lis[0].innerHTML);

26  lis[3].innerHTML = "<a href=''>这是改过后的内容</a>";

27  console.log(lis[3].innerHTML);

28 

29 

30  //通过类名获取元素

31  var item3 = document.getElementsByClassName('item3')[0];

32  console.log(item3);

33 </script>

34 </html>

 

四、设置和获取html属性的方式

4.1 通过对象的方式设置和获取属性

obj.att  ||  obj[att]

4.2 通过get/set方式设置和获取属性

setAttribute(att,value);

getAttribute(att);

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document对象属性</title>

<style type="text/css">

 .p1-set{

  background: red;

 }

10 

11   .p2-set{

12    color: orange;

13    font-size: 20px;

14   }

15 

16   .p3-set{

17    font-family: "楷体";

18    font-weight: 900;

19   }

20  </style>

21 </head>

22 <body>

23  <p id="p1" data-set="hhh" ss="ss">通过对象.属性的方式添加html属性</p>

24  <p id="p2">通过对象[属性]的方式添加html属性</p>

25  <p id="p3">通过setAttribute()的方式添加html属性</p>

26 </body>

27 <script type="text/javascript">

28  var p1 = getId("p1");

29  var p2 = getId("p2");

30  var p3 = getId("p3");

31 

32  console.log("p3",p3);

33 

34  //obj.att

35  p1.className = "p1-set";

36  p1.align = 'center';

37  console.log(p1.id);

38 

39  p1.mydefined = "hello";

40  console.log(p1.mydefined )

41 

42  //obj["att"]

43  p2["className"] = "p2-set";

44  p2['data-defined'] = "world";

45  console.log(p2['data-defined']);

46 

47 

48  //get/set方法

49  p3.setAttribute("class",'p3-set');

50  console.log(p3.getAttribute('id'));

51  p3.setAttribute("aaa",'111');

52  p3.setAttribute("data-defined",'mydefined');

53 

54  console.log(p1.getAttribute('data-set'));

55  console.log(p1.getAttribute('ss'));

56 

57  function getId(id){

58   return document.getElementById(id);

59  }

60 </script>

61 </html>



关注微信公众号“icketang”,获取最新前端资讯,学习资料  

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: JavaScript源码笔记(第六天)—前端培训机构
下一篇文章: 为什么要选择爱创课堂学前端?
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>