操作DOM简单笔记
DOM
DOM 给我们提供了一些方法，让我们可以使用js来控制页面中的标签等。
作用：
它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
页面元素 – 页面中的标签 ： 常用的dom方法
document.getElementById(“box”); //通过id获取标签
document.getElementsByTagName(“div”); 根据标签名获取页面元素
注意：
由于获取结果可能是多个，element后面要加s
根据标签获取的结果是伪数组形式，伪数组是不具备数组的方法。
要操作伪数组中的所有元素需要遍历伪数组。
根据标签名获取元素时，有可能获取到的标签只有一个，但是形式还是伪数组。
根据标签名获取时，document可以更换为任意标签
在box中获取li标签。
注意： 根据id获取的时候，前面只能写document
- document.getElementsByclassName(“box1”) 根据类名获取页面元素
- window.onload()中的代码会在页面完全加载后执行。
设置标签的样式等方法
对标签的样式设置使用.style
var box=document.getElementById("box");
box.style.width="100px";
box.style.backgroundColor="#ff00000" //带有段横线的属性要是用驼峰命名的方式。
事件类型
- 点击事件 onclick
- 鼠标移入 onmouseover
- 鼠标移出 onmouseout
使用节点
dom – 文档对象模型 document是dom中的*对象
dom把html页面看作一个树结构
dom树中的每一个部分我们都称为节点。
节点访问关系
dom中提供了一套访问关系，称为节点访问关系
1.父子访问关系：
通过parentNode可以访问某个节点的父节点
通过childNodes可以得到某个节点的所有子节点，包含文本节点（空格和换行）
通过children可以得到某个节点中的所有元素子节点（不是标准方法，但是所有浏览器都支持，可放心使用）。
2.获取子节点
node.firstChild 表示第一个子节点（包含文本节点）
node.lastChild 最后一个子节点（包含文本节点）
3.获取元素子节点：ie低版本不支持
node.firstElementChild 第一个元素子节点
node.lastElementChild 最后一个元素子节点
节点类型
元素节点，文本节点，属性节点。
访问节点
DOM为Node类定义以下属性：
ownerDocument:返回当前节点根元素
parentNode：返回当前节点的父节点
chiledNodes:返回当前节点点的所有子节点列表
firstClide:返回当前节点的首个子节点
lastClide:返回当前节点的最后一个子节点
next Sibling:返回当前节点之后相邻同级节点
previousSibling:返回当前节点之前相邻同级节点
节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
1、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
2、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
3、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
获取所有LI标签，并输出相应节点的名称、节点的值、节点的类型：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>节点属性</title>
6 </head>
7 <body>
8 <ul>
9 <li>javascript</li>
10 <li>HTML/CSS</li>
11 <li>jQuery</li>
12 </ul>
13 <script type="text/javascript">
14 var node = document.getElementsByTagName("li");
15 for(var i = 0; i < node.length; i++){
16 document.write("节点名称：" + node[i].nodeName + "<br/>");
17 document.write("节点的值：" + node[i].nodeValue + "<br/>");
18 document.write("节点类型：" + node[i].nodeType + "<br/>");
19 }
20 </script>
21 </body>
22 </html>
运行结果：
使用文档
访问文档子节点
有两种方法：
1.使用documentElement属性，该属性始终指向HTML的html元素
2.使用childNodes列表访问文档元素
代码如下：
var html= document.documentElement;
var html= document.childNodes[0];
var html= document.firstChild;
document对象有个body属性，可以直接访问body元素。代码如下：
var body=document.body;
访问文档信息
document包含很多属性来访问文档，例如;
title:设置或返回title标签包含文本信息
lastModified:返回文档最后被修改的时间和日期
URL：返回文档完整的URL
domain:返回当前文档域名
referrer:返回连结到当前页面的那个页面的URL
访问文档元素
document包含很多属性来访问文档内元素的方法：
getElementByld:返回指定id值的元素
getElementByTagName:返回所有指定标签名称的节点
getElementByName:返回所有指定name属性值的元素节点。用于表单，
使用元素
访问
精确获取文档中指定元素，用法如下：
document.getElementById(ID)
创建
根据参数指定的标签名称创建一个新元素。
var element= document.createElement(‘tagName’)
复制
clonNode()方法创建一个节点的副本。
例子：
var p= document.createElement(‘p’)
var p1=p.clonNode(false)
插入
在文档中插入节点主要有两种方法;
1.appendChild()
向当前节点的子节点列表的末尾添加新的子节点
语法如下：
appendChild(new)
2.insertBerfore()
在已有节点前插入新的子节点
语法如下：
insertBerfore(new,rechid)
删除
removeChild()可以从子节点列表中删除某个节点。
语法如下：
nadeObject.removeChild(node)
node为要被删除的子节点
替换
replace Child（）可以将某个子节点替换成另一个
语法如下：
nodeObject.replaceChild(new_node,old_node)
new_node为新的节点
old_node为旧的节点
获取焦点
HTML5锌层DOM焦点管理功能，受用document.activeElement属性。
元素焦点获取方法包括
页面加载
用户输入
脚本使用focus()方法
语法如下：
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true,证明用户正在与页面交互
使用文本
访问
使用文本的nodeValue属性或者data shuxing fangwen Text节点中包含的文本。
每个文本中还包含length属性
例子：
获取 div元素中的文本，比较直接的方式是用元素innerText属性读取。
<div id="div1">div 元素</div>
<script>
var div=document.getElementById('div');
var text=div.innerText;
alert(text);
</script>
创建
使用document对象的createTextNode()方法创建文本节点。
用法如下：
document.createTextNode(data)
参数data表示字符串
编辑
用下列方法可以操作文本节点中的文本：
apenData（string):将字符串sting自加到文本节点的尾部
deleteData(start,tength);从start下标位置开始删)ength个字符
insertDatalstart,string):在start下标位置插)字符串string.
replaceData(start,length,string):使用字符串string 替换从star下标位置开始length个字符
splitText(offset):在offset下标位置把一个Text节点分割成两个节点
substringData(start,length):从start下标位置开始是取length个字符
使用CSS选择器
CSS选择器是一个便捷的确定元素的方法，当需要联合调查时，使用去热议Selector All（）更加便利。
例子：
代码如下：
<div class="content">
<ul>
<li class="red">首页</li>
<li class="blue">娱乐</li>
<li class="blue">时尚</li>
<li class="red">互联网</li>
</ul>
</div>
<script>
document.querySelector('.content ul li');
//获取第一个li元素
document.querySelectorAll('.content red');
//获取所有红色的li元素
document.querySelectorAll('.content ul li');
//获取所有li元素
</script>
实例：
1.代码如下：
<p>显示表单中的每个元素的值</p>
<form id="表单" action="form_action.asp">
First name: <input type="text" name="fname" value="唐纳德"><br>
Last name: <input type="text" name="lname" value="杜克"><br><br>
<input type="submit" value="Submit">
</form>
<p>单击“Try it-4”以显示表单中的每个元素的值。</p>
<button onclick="myFunction_4()">Try it-4</button>
<p id="demo4"></p><hr>
<script>
function myFunction_4() {
var x4 = document.forms["表单"];
var text = "";
var i;
for (i = 0; i < x4.length ;i++) {
text += x4.elements[i].value + "<br>";
}
document.getElementById("demo4").innerHTML = text;
}
</script>
显示效果：
2.代码如下：
<style type="text/css">
#容器 {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#动画 {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<p>创建一个动画容器</p>
<button onclick="myMove()">click-7!</button><br><br>
<div id="容器">
<div id="动画"></div>
</div><hr>
<script>
function myMove() {
var elem = document.getElementById("动画");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
显示效果：