Javascript基础_08DOM初级应用

来源：互联网发布：淘宝店关闭了还能开吗编辑：程序博客网时间：2024/04/29 11:38

1.DOM基本概念

1.1 定义： DOM是Javascript操作网页的接口，全称是文档对象模型，它的作用是将网页转换为一个Javascript对象（document兑现），从而可以用来进行各种操作例如增删等

1.2 各浏览器对DOM标准的支持度

火狐浏览器：DOM1和DOM2全部实现

谷歌或Safari浏览器：DOM1实现了大部分，DOM2实现了一部分

IE浏览器：对DOM1和DOM2都实现了一部分

1.3 节点：DOM的最小组成单位，文档的树形结构就是由不同类型的节点组成的

节点类型：

document 整个文档的顶层节点

DocumentType docutype标签

Text 标签之间的文本

Comment 注释

Element 网页中各种元素标签

Attribute 网页元素的属性，例如class= “class“

DocumentFragment 文档[碎片（片段）]

节点数：一个文档中的所有节点，会按照所在的层级抽象为一个树状结构

节点与节点之间的关系：

父级节点关系parentNode

子节点关系 childNodes

兄弟节点关系 sibling

2.DOM节点

2.1 childNodes与nodeType

获取子节点childNodes作用于父级，返回是一个数组

语法：父级.childNodes

返回是一个节点集合，里面除了返回html元素之外，还包含text节点和comment节点

<body><ul><li>111</li><li>222</li><li>333</li></ul><script type="text/javascript">window.onload = function(){var lis = u1.childNodes;alert(lis.length);//5，空白文本也会被当做一个子集，例如换行};</script></body>

Node.nodeName与Node.nodeType对应关系

Node.nodeName返回的是节点的名字如div,li等

Node.nodeType返回的是节点类型的常数值

具体类型 nodetype值

html元素 1

属性 2

文本 3

注释(Comment) 8

Document 9

文档片段 11

DocumentType 10

注意:如果使用childNode来获取父级中的直接子元素,必须配合nodeType一起使用,否则会出问题

childNodes与NodeType区别

<body><div>123</div>123<script type="text/javascript">window.onload = function(){var nodes = document.body.childNodes;var i = 0;//文本内容不能添加任何样式，否则会报错for (i = 0;i < nodes.length;i ++){if (nodes[i].nodeType == 1)//注意:如果使用childNode来获取父级中的直接子元素,必须配合nodeType一起使用,否则会出问题{nodes[i].style.background = "red";}}};</script></body>

2.2 获取子节点

<body><ul><li>111</li><li>222</li>123354</ul><script type="text/javascript">window.onload = function(){//父节点.children 获取子节点,获取的子节点只包含元素节点var UL = document.getElementsByTagName("ul")[0];//alert(UL.children.length);//2，只获取元素节点，不获取换行等，与childNodes不同UL.children[0].style.background = "red";UL.children[1].style.background = "blue";};</script></body>

2.3 parentNode

parentNode属性返回当前子节点的父节点,,对一个节点来讲,父节点的类型三种类型:

1.element节点

2.document节点

3.documentFragment节点

返回值为一个具体父节点对象。

点击隐藏标签：

<body><ul><li>1<a href="###">隐藏</a></li><li>22<a href="###">隐藏</a></li><li>333<a href="###">隐藏</a></li><li>4444<a href="###">隐藏</a></li><li>55555<a href="###">隐藏</a></li></ul><script type="text/javascript">window.onload = function(){var as = document.getElementsByTagName("a");var i =0;for (i = 0;i < as.length;i ++){as[i].onclick = function(){this.parentNode.style.display = "none";};}};</script></body>

2.4 offsetParent

offsetParent获取的是相对父级元素，正常情况下它是以body进行参考。如果父级设置了定位，子级设置了绝对定位则以定位的父级作为参考

<body><div id="div1"><div id="div2"></div></div><script type="text/javascript">window.onload = function(){var div2 = document.getElementById("div2");var div = div2.offsetParent;alert(div.nodeName);//DIV, nodeName获取节点名字}; </script></body>

2.5 获取首尾子节点

<body><script type="text/javascript">window.onload = function(){var Ul = document.getElementById("ul");//第一种方式//Ul.children[0].style.background = "red";//第二种方式//IE下支持firstChild写法,谷歌,FF浏览器不支持//Ul.firstChild.style.background = "blue";//谷歌,FF浏览器支持以下写法//Ul.firstElementChild.style.background = "red";//兼容性写法var First = Ul.firstElementChild||Ul.firstChild;//顺序不能换First.style.background = "blue";//注意：firstElementChild与firstChild作用于父级//获取最后一个元素lastChild或lastElementChild同样存在兼容性问题，IE支持lastChild，谷歌火狐支持lastElementChild//兼容性写法var Last = Ul.lastElementChild||Ul.lastChild;//顺序不能换Last.style.background = "red";};</script><ul id="ul"><li>1</li><li>22</li><li>333</li></ul></body>

2.6 获取兄弟节点

IE下支持nextSibling

在FF,chrome支持nextElementSibling

兄弟节上一个节点

IE下支持previousSibling

在FF,chrome支持previousElementSibling

var s =li.nextElementSibling||li.nextSibling;//获取下一个

s.style.background = "red";

var s1 =li.previousElementSibling||li.previousSibling;//获取上一个

s1.style.background = "red";

2.7 元素属性操作

<body><script type="text/javascript">window.onload = function(){var txt = document.getElementById("txt");//第一种方式//txt.value = "12345";//第二种方式 相比第一种优势[]里面的字符串可以被改变，当做参数进行传递//txt["value"] = "555555";//第三种方式 通过DOM操作元素属性txt.setAttribute("value","666666");//第一个参数:需要改的属性//第二个参数：属性对应的值//获取属性//参数是具体的属性，返回的是属性对应的值var V = txt.getAttribute("value");alert(V);};</script><input type="" name="" id="txt" value="" /></body>

3. DOM基本操作

document.creatElement（）创建一个标签，参数填写html具体标签，用双引号或者单引号括起来，返回值为创建的标签

父级.appendChild（）作用于父级，参数是插入的元素，不用引号

父级元素.insertBefore(子节点,前一个节点) 插入一个标签，作用于父级第一个参数为要插入的节点，第二个参数为要插入节点之前的节点

父级元素.removeChild(要删除的元素) 删除一个标签，作用于父级

例一：作用于父级插入标签

<body><script type="text/javascript">window.onload  = function(){var u1 = document.getElementById("u1");var btn = document.getElementById("btn");var txt = document.getElementById("txt");btn.onclick = function(){//创建一个li标签var li1 = document.createElement("li");//给li标签添加文本内容li1.innerHTML = txt.value;//获取已有标签var L = u1.getElementsByTagName("li")[0];//插入标签u1.insertBefore(li1,L);};};</script><input type="text" name="" id="txt" value="" /><input type="button" name="btn" id="btn" value="创建" /><ul id="u1"><li>11111</li></ul></body>

例二：移出父级标签

<body><script type="text/javascript">window.onload = function(){//父级元素.removeChild(要删除的元素)var a = document.getElementsByTagName("a");var ul = document.getElementById("ul");for (var i = 0;i < a.length;i ++){a[i].onclick = function(){ul.removeChild(this.parentNode);};}};</script><ul id="ul"><li>1111<a href="###">删除</a></li><li>1111<a href="###">删除</a></li><li>1111<a href="###">删除</a></li></ul></body>

0 0