1.DOM 简介
JavaScript核心：
DOM：document object model 文档对象模型
BOM: browser object model 浏览器对象模型
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
节点：
节点种类：元素节点(标签) 文本节点(内容) 属性节点 等十二种
节点关系：兄弟节点 父子关系 父节点 子节点 兄弟节点
节点对象：属性和方法
document 文档对象
body document.body
innerHTML 开始标记和结束标记之间的内容
// document.write('hello');
// document.getElementById('box');
2.节点对象属性
innerHTML 开始标记和结束标记之间的内容
document 文档对象
body
节点对象的属性：
childNodes 获取所有的子节点(元素节点、文本节点) NodeList 索引 0 length 节点个数
firstChild 第一个节点
lastChild 最后一个节点
parentNode 父节点
previousSibling 上一个兄弟节点
nextSibling 下一个兄弟节点
举例子：
代码如下
<body>
<div id="box">
<div>你好</div>
<div>我好</div>
</div>
</body>
console.log(document.body); //body元素节点
var bd=document.body ; //body
var o=document.getElementById('box');
var cs=o.childNodes;//子节点
console.log(cs[1]);
cs[1].innerHTML='hello world';//修改内容
cs[3].innerHTML='哈哈哈';
console.log(o.firstChild);//第一个孩子
console.log(cs.length);
节点
document 文档对象
属性：
body body元素对象
title 标题
URL 网页地址
links 超链接 HTMLCollection 集合 索引 0 length
images 图片
forms
方法：
write
writeln
getElementById 根据ID查找节点对象
返回值： 节点对象，null
节点操作： 增删改查
增：
write
document.createElement 创建节点
obj.appendChild 追加子节点
删除节点：
obj.removeChild
复制节点：
cloneNode(flag)
flag 布尔类型 true 复制包含子节点 false 不包含子节点 默认为false
例如：
document.body.appendChild(op)
意思是：将节点对象添加到body中
DOM节点的获取
操作节点,必须首先找到该元素,有三种方法来做这件事:
1、通过id找到HTML元素
document.getElementById(“demo”);
2、通过标签名找到HTML元素
document.getElementsTagName(“div”);
3、通过类名找到HTML元素
document.getElementByClassname(“a”);
4、通过类名查找 HTML 元素在 IE 5,6,7,8 中无效
标签=document.getElementById(“demo”); 通过ID获得标签
他的返回值是一个标签，可以直接使用。获得属性值，设置属性。
标签数组= document.getElementsByTagName(“div”); 通过标签名获得标签数组
标签数组= document.getElementsByClassName(“a”);通过类名获得标签数组
他们两个的返回值是标签数组，习惯性是遍历之后再使用。
特殊情况：数组中的值只有1个。
document.getElementsByTagName(“div”)[0];取数组中第一个元素
document.getElementsByClassName(“a”)[0];取数组中第一个元素
DOM访问关系(节点的获得)
节点的访问关系，是以属性的方式存在的，DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对他们进行访问
DOM节点操作（节点自身）
createElement 创建元素节点
createTextNode 创建文本节点
appendChild() 追加孩子
insertBefore(newNode,oldNode) 在指定节点前插入孩子 // 内部指定位置插入节点
cloneNode 复制节点
removeChild 删除节点
replaceChild 替换节点
DOM节点操作
1 创建节点
新的标签(节点)=document.creatElement(“标签名”);
2 插入节点(使用节点)
a、父节点.appendChild( );
父节点.appendChild(新节点); 父节点的最后插入一个新节点
b、父节点.insertBefore(要插入的节点,参考节点)
父节点.insertBefore(新节点,参考节点) 在参考节点前插入
如果参考节点为null,那么他将在节点最后插入一个节点
.3 删除节点
a、用法:用父节点删除子节点
父节点.removeChild(子节点); 必须指定要删除 的子节点
节点自己删除自己;
不知道父级的情况下,可以这么些:node.parentNode.removeChild(node)
4 复制节点
a、oldNode.cloneNode(true)
新节点=要复制的节点.cloneNode(参数); 参数可选复制节点
用于复制节点,接收一个布尔参数,true表示深复制(赋值节点及其所有子节点),false表示浅复制(复制节点本身,不复制子节点)
5 属性、赋值获取两种方式
a、元素节点.属性或者元素节点[属性]
eleNode.src="image/jd2.png"
console.log(eleNode.src);
console.log(eleNode["title"]);
1
2
3
b、元素节点.方法( );
①.获取: getAttribute(名称) 属性节点
②.设置:setAttribute(名称,值)
③.删除:removeAttribute(名称)
调用者:节点 有参数 没有返回值 每一个方法意义不同
示例代码:
<body>
<div id="box" value="111">你好</div>
<script>
var ele = document.getElementById("box");//元素节点
var att = ele.getAttributeNode("id");//属性节点
var txt = ele.firstChild;
console.log(ele); //<div id="box" value="111">你好</div>
console.log(att); //id="box"
console.log(txt); //"你好"
节点属性
节点对象的属性：
childNodes
firstChild
lastChild
parentNode
previousSibling
nextSibling
节点属性：
HTML DOM
src src
title title
href href
action action
alt alt
for htmlFor
class className
onchange 内容改变
textName.fous(); 获取焦点
1.节点属性值的设置
节点对象.属性名=值;
2.节点属性值的获取
节点对象.属性名
举个例子：
代码如下：
<body>
<img src="images/1.jpg" alt="" id="pic">
<a href="#" id="lk">百度</a>
<form action=""></form>
<label for="uname">用户名:</label><input type="text" id="uname"><br>
<label for="uname" id="tip">密码：</label><input type="password" id="pwd">
<script type="text/javascript">
var oImg=document.getElementById('pic');
//节点属性
oImg.src='images/3.jpg';
oImg.alt='你好';
var link=document.getElementById('lk');
//设置
link.href='http://www.baidu.com';
var oT=document.getElementById('tip');
oT.htmlFor='pwd';
</script>
</body>
DHTML
createCaption 在表格中创建空的caption对象
createTHead 在表格中创建空的thead元素
insertCell 在表格行（tr）中创建新单元格，并将单元格添加到cells集合中
inserRow 在表格中创建新行(tr)
举例：
制作一个表格
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
th,td{line-height: 35px;border: 1px solid gray;text-align: center;}
</style>
</head>
<body>
<script type="text/javascript">
//1.创建表格
var tab=document.createElement('table');
//2.标题
// var cap=tab.createCaption();
// cap.innerHTML='学生信息表';
// console.log(cap);
tab.createCaption().innerHTML='学生信息表';
//3.thead
var tHead=tab.createTHead();
//4.表头
var tr1=tHead.insertRow();
//添加列
tr1.insertCell().innerHTML='编号';
tr1.insertCell().innerHTML='姓名';
tr1.insertCell().innerHTML='年龄';
tr1.insertCell().innerHTML='地址';
//5.tbody
var tbody=tab.createTBody();
//添加行
var tr0=tbody.insertRow();
tr0.insertCell().innerHTML='1000';
tr0.insertCell().innerHTML='Jack';
tr0.insertCell().innerHTML='20';
tr0.insertCell().innerHTML='瑞达路';
//显示在页面中
document.body.appendChild(tab);
</script>
</body>
</html>
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
