您的位置：首页 > Web前端 > JavaScript

[持续更新]JavaScript学习笔记（六）

2015-08-21 21:53 811 查看
1.DOM节点操作

文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API

 


1.选取文档元素

1)document.getElementById()根据id选取元素返回对象

2)document.getElementsByName()根据name选取元素返回NodeList

3)document.getElementsByTagName()根据tag选取元素返回HTMLCollection

4)document.getElementsByClassName()根据class选取元素返回HTMLCollection

5)document.all[]

 <!DOCTYPE html>
<head>
<meta charset="uft-8">
<title>coding.....</title>
</head>
<body>
<div id="div1"></div>
<h1>h1</h1>
<h1>h1</h1>
<form name="form1"></form>
<form name="form1"></form>
<h1 class="red">h1</h1>
<h1 style="color:red">h1</h1>
<script type="text/javascript">
var getId = document.getElementById("div1");
var getTag = document.getElementsByTagName("h1");
var getName = document.getElementsByName("form1");
var getClass = document.getElementsByClassName("red");
var getDocumentAll = document.all["div1"];
</script>
</body>
</html>
运行结果在firebug



可见通过不同方法获取的对象类型是不同的使用的时候要注意

至于HTMLCollection和NodeList的区别 请参考博客
http://blog.csdn.net/hztgcl1986/article/details/9112435
2.文档结构和和历

Document对象element对象和text对象都是node对象（他大舅他二舅都是他舅）node有以下属性

1)parentNode节点的父节点

2)childNodes节点的子对象类数组NodeList对象

3)firstChild,lastChild节点子节点的第一个最后一个对象（null）

4)nextSibling,reviousSibling该节点的下一个上一个兄弟节点

5)nodeType节点类型

元素节点

节点类型取值（nodeType）

元素element

1

属性attr

2

文本text

3

注释comments

8

文档document

9

 

6)nodeValue 节点text或comment节点的文本内容

7)nameNode元素的标签名以大写形式表示

3.作为元素树的文档

蒋经理主要集中在文档的元素上而不是他们之间的文本上，该API的第一部分是Element对象的children属性。类似childNodes，它也是一个NodeList对象。但不同的是children列表只包含Element对象。Children属性并非标准属性，注意不同浏览器的使用。

该API的第二部分是element属性，后者类似node对象的子属性和兄弟属性：

firstElementChild,lastElementChild

nextElementSibling,previousElementSibling

childElemenetCount子元素的数量

4.innerHTML&&outerHTML

例如代码

<div id="div1">this is content</div>

innerHTML输出this is content

outerHTML则输出<div id="div1">this is content</div>

但是要注意outerHTML的兼容问题

还有个类似的东西textContent

举个例子

 <h1 id="test1">test1</h1>
<h1 class="test2">test2</h1>
<script type="text/javascript">
var test1 = document.getElementById("test1");
test1.innerHTML = "this is text in <i>test1</i>";
var test2 = document.getElementsByTagName("test2")[0];
test2.textContext = "this is text in <i>test1</i>";
</script>
输出结果

 


textContent操作的是纯文本元素内容，不必转译HTML标记中使用的尖括号和&符号。

5.创建插入删除节点

创建节点

1)document.createElement();创建Element节点

2)document.createTextNode();创建Text节点

插入节点

1)element.appendChild()插入指定节点使之成为那个节点的最后一个子节点。

2)parentElement.insertBefore(newElement,targetElement)获取到父节点（parentElement），将newElement插入到targetElement之前。

删除替换节点

1)n.parentNode.removeChild(n);此方法需要在其父节点上调用

2)n.parentNode.replace(newElement,n)此方法需要在其父节点上调用

看一个综合的例子:

 <!DOCTYPE html>
<head>
<meta charset="uft-8">
<title>coding.....</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<ul id="parent1">
<li>No.1</li>
<li>No.2</li>
<li id="target1">No.3</li>
</ul>
</div>
<div id="box4">
<ul>
<li>No.1</li>
<li>No.2</li>
<li id="target2">No.3</li>
<li>No.4</li>
</ul>
</div>
<div id="box5">
<ul>
<li>No.1</li>
<li>No.2</li>
<li id="target3">No.3</li>
<li>No.4</li>
</ul>
</div>
<script type="text/javascript">
//创建文本节点
var text = document.createTextNode("This is a <i>text</i>");
var box1 = document.getElementById("box1");
box1.appendChild(text);
//创建节点
var element = document.createElement("h1");
var box2 = document.getElementById("box2");
element.innerHTML = text.nodeValue;
box2.appendChild(element);
//目标节点前插入
var li = document.createElement("li");
li.innerHTML = "new No.4";
var parent1 = document.getElementById("parent1");
var target1 = document.getElementById("target1");
parent1.insertBefore(li, target1);
//删除目标节点
var target2 = document.getElementById("target2");
target2.parentNode.removeChild(target2);
//替换目标节点
var li1 = document.createElement("li");
li1.innerHTML = "new No.3";
var target3 = document.getElementById("target3");
target3.parentNode.replaceChild(li1, target3);
</script>
</body>
</html>
显示效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 前端基础 dom
相关文章推荐
新的分享
章节导航