文档对象模型(Document Object Model)
1.定义
DOM是针对HTML和XML文档的一个API(Application programming interfaces--应用程序编程接口,
DOM描绘了一个层次化的节点树,允许开发人员添加,移除,修改页面的某一部分。
对DOM树进行增删改查
2.Node类型
1.DOM1级定义为一个Node接口,该接口将由DOM中的所有节点类型实现。
javascript中所有的节点类型都继承自Node类型,
所有节点类型都共享着相同的基本属性和方法。
//因为js代码从上到下执行,这里页面节点还没加载完毕就进行了获取
//文档加载完毕之后执行js代码
window.onload = function () {
var div = document.getElementById('one');
console.log(div)
}
<body>
hello
<div id="one" class="two">
div的内容
</div>
text
<!-- 注释内容 -->
</body>
alert()弹框会阻止下面代码的执行,只有点击确定之后才会执行下面代码
3.Node类型的属性和方法
1.body节点
1.//获取body节点
var body=document.body;
2.查看节点类型(nodeType) 9Document 1Element 3Text 8Comment
console.log(document.nodeType)//9
3.//获取节点名称 返回纯大写节点名称
console.log(body.nodeName)
4.//获取子节点 childNodes保存一个NodeList对象
console.log(body.childNodes);
5.//获取兄弟节点中的前一个节点
var childs=body.childNodes;
console.log(childs[1].previousSibling);
6.//获取兄弟节点的下一个节点
console.log(childs[1].nextSibling)
7.//或取childNodes列表中的第一个节点
console.log(body.firstChild)
8.//或取childNodes列表中的最后一个节点
console.log(body.lastChild)
9.//指向表示整个文档的文档节点。
console/log(body.ownerDocument)
10.//查看body节点是否有孩子节点
console.log(body.hasChildNodes());
11.//获取某一元素节点内的元素孩子节点
console.log(body.children);
2. //类数组转数组 es5
var result=Array.prototype.slice.call(childs,0);
console.log(result);
//es6 Array.from(childs);
var temp=Array.from(childs);
console.log(temp)
3.//从孩子节点中过滤出元素节点
var temp=Array.from(childs);
var result=temp.filter(function(item){
return item.nodeType === 1
})
console.log(result)
4.操作节点(以下四个方法都需要父节点对象进行调用!) *****
1.appendChild()追加节点
//1.获取到父节点
//2.找到孩子
//3.添加
var parent=document.getElementsByClassName('parent')[0];
var newChild=document.createElement('div');
//添加内部文本
// newChild.innerText='four';
/添加内部内容 innerHTML可以设别html代码片段 可以识别标签
newChild.innerHTML=`<div class='child'>newChild</div>`
parent.appendChild(newChild);
console.log(parent)
console.info(parent)
console.debug(parent)
console.error(parent)
console.warn(parent)
2.insertBefore()在参照节点前插入节点 第一个参数要插入的节点 第二个参数参照节点
同一个节点在页面中只存在一个
var two=parent.children[1];
parent.appendChild(two)
parent.insertBefore(newChild,two);
3.replaceChild()替换节点 第一个参数:要插入的节点;第二个参数:要替换的节点;第二个节点被删除
parent.replaceChild(newChild,two)
4.removeChild()一个参数 要移除的节点
parent.removeChild(two)
----------------------------
以下属性和方法可以任意元素节点调用
5.获取节点内部内容
parent.innerHTML;设别HTML代码片段
parent.innerText;;只识别文本 去除空格和回车
parent.textContent;只识别文本,不去除空格和回车
6.清空节点内部内容
parent.innerHTML=""
7.cloneNode();复制节点 有参数true代表深复制
//浅复制 只复制节点 不复制内容
var cloneTwo=two.cloneNode();
parent.appendChild(cloneTwo);
// 深复制 复制节点和内容
var cloneTwo=two.cloneNode(true);
parent.appendChild(cloneTwo);
5.Document类型--属性和方法
Javascript通过使用Document类型表示文档
。在浏览器中,document对象是HTMLDocument的一个实例,
表示整个HTML页面。document对象是window对象的一个属性,
因此可以直接调用。HTMLDocument继承自Document。
window.document.body
属性:
1. //document-*-表示整个html文档页面
console.log(document)
2. // html元素
console.log(document.documentElement);
// body元素
console.log(document.body);
// img元素
console.log(document.images)
// form元素
console.log(document.forms);
// a标签 带有href属性的
console.log(document.links);
// 获取域名 --只能通过服务器打开
console.log(document.domain);
// 获取文档头信息
console.log(document.doctype);
// 获取文档标题
console.log(document.title);
// 获取URL
console.log(document.URL);
// 获取页面来源地址--只能通过服务器打开
console.log(document.referrer)
3.查找元素--方法
getElementById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
6.Element类型
1.获取属性值,使用.访问自有属性,使用getAttribute获取自定义属性
// 获取div的id属性
console.log(div.id)
// 获取div的类名属性
console.log(div.className)
// 获取div的title属性
console.log(div.title)
// 使用[]也可以获取属性
console.log(div['title'])
2.// 获取自定义属性
// console.log(div.flag) 使用.获取不到自定义属性
console.log(div.getAttribute('data-flag'))
console.log(div.getAttribute(['data-flag']))
3.//修改属性
div.setAttribute('data-flag','test1');
4.//获取style属性和onclick属性 .style .onclick拿到的对象或函数 getAttribute拿到的是字符串
console.log(div.style) {}对象
div.style.width='200px'
console.log(div.onclick) function(){}函数
console.log(div.getAttribute('style')) 字符串
console.log(div.getAttribute('onclick'))
5.// 移除属性
div.removeAttribute('title');
console.log(div);