DOM文档对象模型
一.节点
1.节点分类
元素类型 节点类型
-
element(元素) 1
//获取元素
var ele=document.getElementById("myImg");
console.log("Element: "+ele);
console.log("nodeName: "+ele.nodeName);
console.log("nodeValue:"+ele.nodeValue);
console.log("nodeType: "+ele.nodeType);
console.log(""); -
attr(属性) 2
//属性节点(通过元素节点获取属性节点)
var attr=ele.getAttributeNode("src");
console.dir(attr);
console.log("nodeName: "+attr.nodeName);
console.log("nodevalue: "+attr.nodeValue);
console.log("nodeType: "+attr.nodeType);
console.log(""); -
text(文本) 3
//文本节点
var p=document.getElementById("myP");
var txtNode=p.firstChild;
console.log(txtNode);
console.dir(txtNode);
console.log("nodeName: "+txtNode.nodeName);
console.log("nodeValue: "+txtNode.nodeValue);
console.log("nodeType: "+txtNode.nodeType);
console.log(""); -
comment(注释) 8
//注释节点
var comment=document.body.firstChild;
console.dir(comment);
console.log("nodeName: "+comment.nodeName);
console.log("nodeValue: "+comment.nodeValue);
console.log("nodeType: "+comment.nodeType); -
document（文档） 9
//文档节点
console.log(document);
console.log(document.nodeName);
console.log(document.nodeValue);
console.log(document.nodeType);
2.属性
- nodeName(节点名字)
- nodeValue(节点值)
- nodeType(节点类型)
二.从HTML获取元素
1.通过ID
-
getElementById()
-
一个元素具有ID属性，会自动生成与之同名的全局变量
//如果一个元素设置了ID,系统会生成与id同名的全局变量
box01.style.backgroundColor="green"; -
IE9+ 所有的元素都有name属性
-
IE9- 个别元素有name属性
2.通过标签名
- getElementsByTagName()
- element.getElementsByTagName()
- document.images(所有img的引用)
- document.links(所有超链接的引用)
- document.anchors(所有锚点的引用)
- document.forms（所有表单的引用）
3.通过class类型(类名)
-
getElementsByClassName()
//通过class类型
var eles=document.getElementsByClassName("box");
console.log(eles);
eles[3].style.backgroundColor="#ccc"; -
IE9+
-
element.getElementsByClassName()
4.通过选择器
-
document.querySelector()
var ele=document.querySelector(".box");
console.log(ele); -
document.querySelectorAll()
//根据选择器
var eles=document.querySelectorAll(".box");
var eles=document.querySelectorAll("div");
// var eles=document.querySelectorAll("div[name='lili']");
// var eles=document.querySelectorAll("div:first-of-type");
console.log(eles); -
element.querySelectorAll()
-
element.querySelector()
5.document.all
-
文档中所有的元素
console.log(document.all);
document.all它的自带可以判断是否是IE
if (document.all) {
console.log("啊，我是IE");
} else {
console.log("啊，我不是IE");
}
三.文档节点的结构
1.节点的关系
-
父节点 父元素
//父节点
console.log(ulEle.parentNode);
console.log(ulEle.parentNode.parentNode); -
子节点 子元素
var ulEle=document.queryselector("ul");
//子节点
console.log(ulEle.childNodes);
console.log(ulEle.firstChild);
console.log(ulEle.lastChild); -
兄弟节点 兄弟元素
//兄弟节点
var li=document.querySelector("#myItem");
console.log(li.nextSibling);
console.log(li.previousSibling); -
祖先节点 祖先元素
-
后代节点 后代元素
2.节点相关属性
- parentNode（父节点）
- childNodes（所有子节点的集合）
- firstChild（第一个子节点）
- lastChild（最后一个子节点）
- nextSibling（下一个子节点）
- previousSibling（上一个子节点）
3.元素相关属性
-
parentElement（父元素）
-
大部分情况下 parentElement 等同于 parentNode
-
children（所有子元素的集合）
-
firstElementChild IE9+
-
lastElementChild IE9+
-
nextElementSibling IE9+
-
previousElementSibling IE9+
-
childElementCount 子元素的数量 IE9+
-
ownerDocument IE9+（返回元素所属的文档对象）
四、属性
1、内置属性
- js对象和html标签有映射关系
2、自定义属性
- getAttribute(attrname) 获取自定义或内置属性的值
- setAttribute(attrnane, value) 设置自定义或内置属性
- hasAttribute(attrname) 判断是否存在该属性
- removeAttribute() 移出自定义或内置的属性
3、H5新增的自定义属性操作操作
- HTML：
<tag data-attr=""> - JS ： element.dataset.attr
4、把属性当做属性节点
- getAttributeNode(attrname)
五、元素的内容
1、作为HTML的元素内容
- innerHTML
- outerHTML
2、作为纯文本的元素内容
-
innerText 会忽略多余的空格
-
textContent IE9+
悯农
锄禾日当午
汗滴禾下土
Number盘中餐
粒粒皆辛苦
3、作为Text节点操作(了解)
- 文本节点的方法
- appendData()向文本节点追加内容
- deleteData()删除文本节点的一部分内容
- insertData()向文本节点中插入内容
- replaceData()替换内容
- substringData()截取内容
- 创建文本节点
- document.createTextNode()
六、元素操作（节点）
1、创建元素
-
document.createElement(tagName)
function addImage(){
//创建元素
var newImage=document.createElement("img");
newImage.src="../images/4.jpg";//给某个元素追加子节点
boxEle.appendChild(newImage);
}
2、添加元素（给父元素添加子元素）
-
appendChild(node)
-
insertBefore(newNode, oldNode)
function insertImage(){
//创建元素
var newImage=document.createElement("img");
newImage.src="../images/4.jpg";//插件的指定位置
boxEle.insertBefore(newImage,document.querySelector("#box img:nth-of-type(3)"));
}
3、删除元素
-
removeChild(node)
function deleteImage(){
var imgs=document.querySelectorAll("#box img");for(var i=0;i<imgs.length;i++){
if(imgs[i].className === "current"){
boxEle.removeChild(imgs[i]);
}
}}
4、替换元素
-
replaceChild(newNode, oldNode)
function replaceImage(){
var newImage=document.querySelector("#newImage");
var imgs=document.querySelectorAll("#box img");for(var i=0;i<imgs.length;i++){
if(imgs[i].className === "current"){
boxEle.replaceChild(newImage.cloneNode(),imgs[i]);
}
}}
5、克隆节点
-
cloneNode(false)
//给img元素添加 单击事件
boxEle.onclick=function(ev){
var e=ev || window.event;
if(e.target.nodeName.toLowerCase() === "img"){
e.target.classList.toggle("current");
}
}document.body.appendChild(boxEle.cloneNode(true));
七、元素的尺寸大小
1、元素的位置
-
getBoundingClientRect()返回对象 包含位置信息 大小信息
console.log(boxEle.getBoundingClientRect().left);
console.log(boxEle.getBoundingClientRect().top); -
offsetLeft/offsetTop距离左边/上面的距离, 相对规则同 css 的定位
console.log(boxEle.offsetLeft);
console.log(boxEle.offsetTop); -
clientLeft/clientTop没卵用 就是边框宽
-
offsetParent得到第一定位的祖先元素
2、元素的尺寸
-
getBoundingClientRect()
console.log(boxEle.getBoundingClientRect().width);
console.log(boxEle.getBoundingClientRect().height); -
offsetWidth/offsetHeight
console.log(boxEle.offsetWidth);
console.log(boxEle.offsetHeight); -
clientWidth/clientHeight
-
scrollWidth/scrollHeight
-
getClientRects()
console.log(boxEle.getClientRects());
3、滚动距离
- scrollLeft
- scrollTop
八、docuemnt
1、属性
-
URL 只读
-
domain 获取域名只读
-
referrer 获取上一个页面的地址 只读
-
lastModified 文档的最后一次修改时间 只读
-
location 对location对象引用
-
title 文档标题
标题滚动
2、方法
- write()
- writinln()
九、表单DOM
1、Form元素
- submit()
- reset()
- elements
2、按钮(submit reset button)
- click()
- blur()
- focus()
3、单选/复选
- click()
- blur()
- focus()
4、文本(input textarea)
- blur()
- focus()
- select()
5、select
-
add() 新增选项
十、HTML DOM
1、Select
- 属性options
- 方法add()
- 方法remove()
小实例
十一、Table
1、属性
- rows 行数组
- cells 单元格数组
2.方法
- createCaption()为表格创建一个 caption 元素。
- deleteCaption() 从表格删除 caption 元素以及其内容
- createTHead() 在表格中创建一个空的 tHead 元素
- deleteTHead()
- createTFoot() 在表格中创建一个空的 tFoot 元素
- deleteTFoot()
- insertRow() 添加一个tr
- deleteRow(index) 删除一行
十二、tr
1、属性
- rowIndex 返回该行在表中的位置
- cells 返回包含行中所有单元格的一个数组
2、方法
insertCell() 在一行中的指定位置插入一个空的 元素
deleteCell() 删除行中的指定的单元格
td th属性
- cellIndex 返回单元格在某行的单元格集合中的位置
浙公网安备 33010602011771号