JavaScript基础-DOM的学习

DOM（全称：document object model，文档对象模型），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。通俗的讲：对网页进行增删改查的操作

常用的DOM操作	常用的DOM方法
1. 查找节点	getElementById()	通过元素id获取元素
2. 读取节点信息	getElementsByTagName()	通过标签名获取元素
3. 修改节点信息	getElementsByClassName()	返回父元素下指定class属性的元素
4. 创建新节点	appendChild()
5. 删除结点	removeChild()
	replaceChild()
	insertBefore()
	createAttribute()
	createElement()	创建空元素
	createTextNode()
	getAttribute()
	setAttribute()

DOM查找

1.按id属性，精确查找一个元素对象

//例如：
var elem=document.getElementById("id值")

强调：getElementById只能用到document上

2.按标签名查找

//例如：
var elem=parent.getElementsByTagName("tag")
//查找指定parent下所有标签名为tag的子代标签

强调：
(1) 可用在任意父元素上
(2) 不仅查直接子节点，而且查所有子代节点
(3) 返回一个动态集合，即使只找到一个元素，也返回集合，必须用[0]取出唯一元素

3.通过name属性查找

var elem=document.getElementsByName("name属性值")
可以返回DOM树中具有指定name属性值得所有元素集合

4.通过class查找

var elem=parent.getElementsByclassName("class属性值")
//查找父元素下指定class属性的元素

5.通过CSS选择器查找
5.1. 只找一个元素

var elem=parent.querySelector("selector")

强调：selector支持一切CSS选择器；如果选择器匹配有多个，只返回第一个

5.2. 找多个元素

var elem=parent.querySelectorAll("selector")

强调：selector API返回的是非动态集合

DOM修改

DOM标准：

• 核心DOM：可操作一切结构化文档的API，包括HTML和XML，万能但繁琐
• HTML DOM：专门操作HTML文档的简化版API，仅对常用的复杂的API进行了简化，不是万能但简单

修改属性-------核心DOM：4种操作

1. 读取属性值
   1.1. 先获得属性节点对象，再获得节点对象的值：

var attrNode=elem.attributes[下标/属性名];
var attrNode=elem.getAttributeNode("属性名")

attrNode.value-----属性值

1.2. 直接获得属性值

var value=elem.getAttribute("属性名");

2. 修改属性值

elem.setAttribute("属性名",value);

例：

var h1=document.getElementById("a1");//通过id获取元素h1
h1.setAttributeNode("name",zhangsan);//设置h1的name属性值为zhangsan

3. 判断是否包含指定属性

var bool=elem.hasAtrribute("属性名")
例：
var bool=document.getElementById("a1").hasAttribute("onclick");

4. 移除属性

elem.removeAtrribute("属性名")；
例：
<a id="alink" class="slink" href="javascript:void(0)" onclick="jump()">百度搜索</a>
var a=document.getElementById("slink");
a.removeAttribute("class");

修改样式

内联样式：elem.style.属性名
强调: 此时属性名含有横线，应去掉横线，写成驼峰形式；例如：background-color需写成backgroundColor

DOM添加

添加元素的步骤

1. 创建空元素

var elem=document.createElement("元素名")；
//例：
var table=document.createElement("table")；
var tr=document.createElement("tr")；
var td=document.createElement("td")；

console.log(table);

2. 设置关键属性和样式
   属性设置格式：元素 . 属性名=属性值
   例如：

a.innerHTML=“go to tmooc”;
a.href=“http://tmooc.cn”;
即 < a href=“http://tmooc.cn”>go to tmooc</ a >

样式设置格式：
元素 . style . CSS属性名=属性值
或者 元素 . style . cssText=可设置多个属性值
例如：

a.style.opacity=“1”;//设置透明度
a.style.cssText=“width: 100px;height: 100px”;//可设置多个样式

3. 将元素添加到DOM树（只有将新建的元素添加到DOM树上才能在网页中看到）

方法一：
parentNode.appendChild(childNode);
//可用于给父元素末尾添加一个子节点
//例如：
var div=document.createElement("div");
var txt=document.createTextNode("版权声明")；

div.appendChild(txt);//将txt内容放在div里
document.body.appendChild(div);//将div放到body里去

方法二：
parentNode.insertBefore(newChild,existingChild)
//用于在父节点的指定子节点（existingChild）之前添加一个新节点
//例如：
<ul id="menu">
	<li>首页</li>
	<li>联系我们</li>
</ul>

var ul=document.getElementById("menu");
var newLi=document.createElement("li")；

ul.insetBefore(newLi,ul.lastChild);

添加元素的优化