1.因为HTML标签,被浏览器进行渲染时,就会将网页中所有标签内容渲染成对象在网页中进行展示。所以每个HTML标签其实都是独立的网页文档对象,随意才能被JS进行提取、修改、删除、查询的操作
DOM-document object model: 文档对象模型:统一管理组织网页文档数据/网页标签
DOM模型数据操作
JavaScript操作网页文档对象
操作标签【增加、删除、查询】
操作属性【增加、删除、修改、查询】
操作样式【增加、删除、修改、查询】
操作内容【增加、删除、修改、查询】
docement。getElementById()根据标签的id属性提取一个标签对象
document。getElementsByTagName()根据标签名称,提取多个标签对象
document。getElemensByName()根据标签的name属性提取多个标签对象
document。getElementsByClassname()根据标签的class属性提取多个标签对象。对于IE7不兼容,目前主流浏览器都可以操作。
2、查询标签对象
查询一个指定的标签
document.getElementById()
document.getElementsByName()
document.getElementsByClassName()
document.getElementsTagName()
查询这个标签的所有字标签:
(1)获取当前标签区域内的字标签数量
var 变量名称 = 区域标签名称。childElementCount;
(2)获取当前标签区域内的文本节点
var 变量名称 = 区域标签名称。childNodes;
(3)获取当前标签区域内的所有字标签;
var 变量名称 = 区域标签名称。Children;
(4)获取当前标间区域内的所有列表(存在兼容性问题)
var 变量名称 = 区域标签名称。childList;
(5)查询第一个子标签(兼容性问题)
var 变量名称 = 当前区域标签名称。firstChild
var 变量名称 = 当前区域标签名称。firstElementChild
(6)查询最后一个子标签(兼容性问题)
var 变量名称 = 当前区域标签名称。lastChild;
var 变量名称 = 当前区域标签名称。lastElementChild;
(7)指定获取子标签中的某个标签
var 变量名称1 = 当前所选中区域标签名称。children;
var 变量名称2 = 变量名称1【0】(下标操作)
查询这个标签的父标签:
(Node.parentNode返回当前节点的父节点)
pass
查询这个标签的兄弟标签|同级标签:
var 变量名称1 = documnet.getElementById(“id属性”)
(获取它前面的同级标签)
var 变量名称2 = 变量名称1。previousSibling;
var 变量名称2 = 变量名称1.nextSibling;
// var变量名称2 1 = 变量名称1.previousElementSibling;// 兼容性问题
// var 变量名称3 =变量名称1.nextElementSibling;// 兼容性问题
var _p1 = _tt2.parent;
var _p2 = _tt2.parentElement;
var _p3 = _tt2.parentNode;
pass
/*********************查询标签********************************/
/*
Node.nodeName //返回节点名称,只读
Node.nodeType //返回节点类型的常数值,只读
Node.nodeValue //返回Text或Comment节点的文本值,只读
Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写
Node.baseURI //返回当前网页的绝对路径
Node.ownerDocument //返回当前节点所在的顶层文档对象,即document
Node.nextSibling //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling //返回当前节点前面的、距离最近的一个兄弟节点
Node.parentNode //返回当前节点的父节点
Node.parentElement //返回当前节点的父Element节点
Node.childNodes //返回当前节点的所有子节点
Node.firstChild //返回当前节点的第一个子节点
Node.lastChild //返回当前节点的最后一个子节点
//parentNode接口
Node.children //返回指定节点的所有Element子节点
Node.firstElementChild //返回当前节点的第一个Element子节点
Node.lastElementChild //返回当前节点的最后一个Element子节点
Node.childElementCount //返回当前节点所有Element子节点的数目。
*/