DOM1
//DOM(文档对象)
//DOM定义了访问和操作HTML文档的标准方法
//DOM树祖先级是document
//根元素是<html>什么是根元素在节点数中，顶点节点被称为根元素也称为根节点
//HTML 文档中每个成员都是节点
//HTML里的标准都是元素节点
//HTML里的换行叫文本节点
//HTML里的属性都叫属性节点
//DOM节点中节点彼此拥有层级关系
//DOM节点里除了HTML根元素节点以外，每个节点，都有父节点，子节点，兄弟节点(意思是同级的节点)。
//dom查找属性元素节点
//关键字里带S的都是类数组要加上[0];
//document.getElementById();//通过id查找
//document.getElementsByTagName();//标签名查找：推荐使用；
//document.getElementsByName();//通过name属性，部分标签可以；Elements加了S，选出来是类数组；
//document.getElementsByClassName();//通过class查找；Elements加了S，选出来是类数组；IE9以下不支持；
var div = document.getElementsByTagName("span")[1];//第2个span标签,
console.log(div);
//查看DOM节点树
// parentElement // 父节点标签元素
// children // 所有子标签
// firstElementChild // 第一个子标签元素
// lastElementChild // 最后一个子标签元素
// nextElementSibling // 下一个兄弟标签元素
// previousElementSibling // 上一个兄弟标签元素
//通过关系查找
var num = document.getElementsByTagName("div")[0];
//查找div的第一个子元素，和第一个字元素的下一个元素的简写；
var a = num.firstElementChild.nextElementSibling;
//查找a标签的下一个兄弟元素；
var b = a.nextElementSibling;
console.log(a)//<p>2</p>
console.log(b)//<p>3</p>
//遍历节点树（兼容性好）
// parentNode 父节点 一直获取，最顶端parentNode是 #document
// childNodes 子节点 包括文本注释等节点
// firstChild 第一个节点
// lastChild 最后一个节点
// nextSibling 下一个兄弟节点
// previousSibling 上一个兄弟节点
//输出div所有节点树(包括元素节点，属性节点，文本节点，和注释节点。)
var a1 = num.childNodes;
//返回一个类数组
console.log(a1);
//可以通过下标来选取其中的一个节点
console.log(a1[1]);
//试试可不可以通过下表来操作这个节点
//可以修改这个值，
a1[1].innerHTML = 2;
console.log(a1[1]);//2
//查找所有的A标签
var num = document.getElementsByTagName("a");
console.log(num);
//遍历节点
for(var i = 0 ; i < num.length; i++){
// 循环给这个标签添加事件
// 在给一个函数名
num[i].onclick = fun;
}
//在函数里写相关的操作
function fun(){
console.log("我被点击了");
};
//修改样式
var tin = document.getElementsByTagName("div")[0];
//样式修改是
//修改的标签.style.添加修改的样式
//CSS里但凡出现-的在JS里都变成大坨峰命名。
tin.style.color = "#f00";
//DOM树的继承
// document 代表文档
// Document 代表构造函数当它是构造函数时它就有prototype（原型）首字符大写不用自己添加nwe 关键字，系统自动生成
浙公网安备 33010602011771号