DOM
Posted develop-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM相关的知识，希望对你有一定的参考价值。
DOM:Document Object Model 文档对象模型【当前html】
BOM操作不够实现页面的动态交互效果，操作html才是核心。
DOM提供了用程序动态控制html接口，描绘了一个层次化的节点树。
便于开发人员添加，移除，修改页面。DOM处于javascript的核心地位上
DOM等级分三类
1.定义CORE核心文档规范
2.定义XML文档规范
3.定义HTML文档规范
一、document属性：ws不自动提示这些单词【方法加执行符，属性直接点.】
body：返回body元素
URL:返回当前文档完整的url地址
lastModified:返回文档最后一次修改的日期和时间
charset:返回编码字符
images:返回页面中所有的image的引用
scripts:返回页面中所有脚本的集合
title:返回当前文档的标题啊，同时也可以修改标题
五个节点：HTML结构中每一个元素都是节点
加载html页面时，web浏览器生成一个树形结构，用来表示页面内部结构。
html是树形结构，DOM将这种树形结构理解为由节点组成，就是节点树。
文档本身是文档节点
所有html元素，标签是元素节点
所有html属性是属性节点
html元素内的文本是文本节点
注释是注释节点
二、document方法-获取节点\元素：
(1)getElementById("id属性值") by:按照
按照id属性值获取元素对象，返回单个对象
注意：若有相同的id属性值，以第一个为准
(2)getElementsByName("name属性值");
按照name属性值获取元素对象，返回对象数组
(3)getElementsByTagName("标签名/元素名称");
按照标签名获取元素对象，返回对象数组
(4)getElementsByClassName("class属性值");
按照class的属性值获取元素对象，返回对象数组
javascript:void(0);伪协议，表示不执行跳转而去执行指定的事件处理函数
<input type="checkbox" name="hobby" value="游泳" />游泳
按照name获取元素
var ho= document.getElementsByName("hobby");
for(var i=0; i<=ho.length-1; i++) {
console.log(ho[i].value);
}
注意：
在进行dom操作时，需要等html全部加载完毕后再进行操作，两种方式
(1)可以将script标签放在html代码下面
可以放在body的最后或body下
(2)可以利用onload事件
1)可以给body标签添加onload事件函数：<body onload="init();">
function init(){
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("你好");
2)写在style下面在js中编写：
window.onload = function () {
//js代码
window.onscroll=function(){}
}
三、document方法2-创建元素，貌似只能在控制台查看。。。
createElement:创建标签，可以指定任何标签
createTextNode:创建文本节点
createAttribute:创建属性节点
createComment:创建一个注释
创建图片对象
var img=new Image() ,通过new 的方式创建一个图片对象
img.src=‘‘; 指定src路径
document.body.appendChild(img); 把图片放入页面中 appendChild
一、操作属性/操作元素属性的方法：
attributes: 返回一个元素的属性数组/对象
setAttribute()：设置或者改变指定属性并指定值
（改变或增加属性） 第一个参数：属性； 第二个参数：属性名称
d.setAttribute(‘id‘,‘test1‘);//改变id为test1
hasAttribute(): 如果元素中存在指定的属性，返回true,否则false ; 一个参数
hasAttributes(): 如果元素有任何属性返回true,否则返回false ; 无需传参
二、操作样式
d.classList: 返回class的类名，以数组形式
["cont", "bg", "btn", value: "cont bg btn"]
d.className: 返回类名的数组形式！因为class是保留字，不能直接使用
d.style: 返回行间定义的样式
style只能获取在行间设置的样式,不能获取外部引用的样式
如何获取行间样式的值？对象.属性 可以取值，也可以赋值，还可以增加属性
d.style.font-size 会报错 ——>d.style[‘font-size‘] | fontSize
d.style.textAlign = ‘center‘;
获取元素实际的css样式值
function getStyle(ele) {
var style = null;
if (window.getComputedStyle) {//在谷歌/火狐等现代浏览器使用
style = window.getComputedStyle(ele, null);
} else {//IE用这个属性
style = ele.currentStyle;
}
return style;
}
console.log(getStyle(d).fontSize);//24px
一、节点\标签：基本属性
nodeType 节点类型；返回节点类型的常数，1-12种类型的常数值
nodeValue 节点的值
nodeName 节点的名字
Node类型 Named Constant 说明<br>
* 1 ELEMENT_NODE 元素节点<br>
* 2 ATTRIBUTE_NODE 属性节点<br>
* 3 TEXT_NODE 文本节点<br>
* 9 DOCUMENT_NODE 文档节点<br>
<div id=‘test‘>div</div>
d.attributes 获取所有属性
d.attributes.id.nodeValue //test
d.attributes.id.nodeType //2
二、获取节点 的属性
ownerDocument: 返回顶层文档，#document owner:所有者
parentNode: 返回父节点
childNodes: 返回子节点，包含文本节点，空格也是一个文本节点
firstChild: 第一个子节点 //#text 空格
lastChild: 最后一个子节点
firstElementChild: 第一个子元素
lastElementChild: 最后一个子元素
previousSibling: 前面的一个同级节点 previous:前一个 sibling:兄弟
nextSibling: 后面的一个同级节点
previousElementSibling: 前面的一个同级元素，没有返回null
nextElementSibling: 后面的一个同级元素，没有返回null
三、操作节点 节点的方法
cloneNode():复制节点
浅复制：不传参数或者传入false,只会复制元素本身
深复制：传入参数true,把元素本身及其子元素都复制出来
appendChild():添加子元素，子元素成为了父元素的最后一个子节点【对象】
var div=document.createElement(‘div‘)
d.appendChild(div)
insertBefore(): 把元素插入到指定元素之前，（新节点，指定位置）
创建一个节点
var span = document.createElement(‘span‘);
var a = document.getElementById(‘a‘);
d.insertBefore(span,a);//第一个参数新元素,第二个参数是位置
removeChild( 需要被移除的元素 ): 返回值是被移动的节点
replaceChild( 新节点，需要被替换的元素 ) ：返回值是被替换的元素
四、检测节点：
hasChildNodes()：检测元素是否有子节点，如果有子节点返回true,无false
注意：文本注释都可以被检测到
contains(): 检测某个节点是否是另外一个节点的子节点（子孙元素也可以检测）contains:包含
用法：父元素.contains(子元素）；返回值为true和false
注意：检测自身返回的也是true
isEqualNode(): 检测2个节点是否一样（必须是一模一样）
用法： 元素1.isEqualNode(元素2），返回值为true和false
var span01 = spans[0];
一、文本操作
innerText: 返回内部文本，不返回内部的标签结构，不解析标签！！！
innerHTML: 返回内部的HTML结构！（使用频率非常高！！！）【字符串】
使用：1.控制台打印：innerText只有文本内容 innerHTML返回内部结构
2.向页面中增加标签，会覆盖原有的文本【页面时间刷新】
p.innerHTML = ‘<h3>梅雨季节大上海！！！</h3>‘+‘<h1>SHSXT!!</h1>‘;
了解：元素大小和偏移量： ——>属性 【贪吃蛇】
offsetHeight：返回元素的高度包括边框和填充
offsetWidth：返回元素的宽度包括边框和填充
offsetLeft：返回当前元素的相对水平偏移位置
offsetTop：返回当前元素的相对垂直偏移位置
offsetParent：返回元素的偏移容器
length属性，可以使用length进行遍历
var items = document.getElementsByClassName(‘item‘);
console.log(items.length);//
for (var i = 0; i < items.length; i++) {
var obj = items[i];
console.log(obj);
}
链式操作：就是 ：方法.方法.方法.方法.方法.方法...
在js中，只有返回节点集合的情况下才可以使用链式调用。(这里只是说在DOM操作范围)
var cont = document.getElementById(‘cont‘);
var divs = document.getElementById(‘cont‘)
.getElementsByTagName(‘div‘)[0]
.getElementsByTagName(‘span‘);
console.log(divs); //span
window 指窗体。document指页面。document是window的一个子对象。
操作节点：
cloneNode():复制节点
浅复制：不传参数或者传入false时，只会复制元素本身
深复制：传入参数true,把元素本身及其子元素都复制出来
只是复制下来，原DOM结构不会发生改变
appendChild():增加子元素
子元素成为父元素的最后一个子节点
新增元素节点
1.write()
将任意的字符串插入到文档中
2.createElement();
创建一个元素节点
参数：传入标签名称
返回值：返回创建的元素对象
3.createTextNode()
创建一个文本节点
4.appendChild()
向元素中添加新的子节点，作为最后一个子节点
5.insertBefore()
向指定的已有的节点之前插入新的节点
setAttribute()
第一个参数：要设置的属性
第二个参数：属性值
步骤：
1.获取元素要添加的位置
2.创建要添加的元素
3.若要设置元素的属性，通过元素对象操作属性即可
元素对象.属性名/元素对象.setAttribute("属性名","属性值")
4.将新元素添加到要添加的位置上
创建option标签的方式
1.通过createElement()方法创建
2.new Option(text值,value值);
//添加p元素
function addP() {
//获取p元素要插入的位置
var container = document.getElementById("container");
/*第一种方式*/
1.创建一个p元素
var p = document.createElement("p");
2.创建一个文本节点
var txt = document.createTextNode("这是一个新增的p标签");
3.将文本节点追加到p元素中
p.appendChild(txt);
4.将p元素追加到div中
container.appendChild(p);
*/
/*第二种方式*/
/*
1.创建一个p元素
var p = document.createElement("p");
2.向p元素添加文本
p.innerHTML = "这是一个新增的p标签";
3.将p元素追加到div中
container.appendChild(p);
*/
/*第三种方式*/
//innerHTML在赋值时新的内容覆盖原有内容，若要保留原有内容，拼接上原有内容
container.innerHTML += "<p>这是一个新增的p标签</p>";
}
插入文本节点
insertBefore(newItem,exsitingItem)
向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
格式：
exsitingItem.parentNode.insertBefore(newItem,exsitingItem)
首先通过参考节点获取父节点，然后根据参考节点向父节点中插入新元素
exsitingItem.parentNode.insertBefore(newItem,null)
相当于
exsitingItem.parentNode.appendChild()
parentNode：可以获取某个元素的父节点
nextSibling：获取当前元素的下一个同胞
function insert () {
//1.获取参考节点
var span = document.getElementById("span1");
//2.创建一个新节点
var p = document.createElement("p");
p.innerHTML = "新节点";
//3.向参考元素的父节点中插入内容，插入的位置是在参考节点之前
//span.parentNode.insertBefore(p,span);
//span.parentNode.insertBefore(p,null);
span.parentNode.insertBefore(p,span.nextSibling);
}
修改元素节点
replaceChild(newNode,oldNode)
用新的节点替换旧的节点
newNode：新的节点
oldNode：要被替换掉的节点
格式：
oldNode.parentNode.replaceChild(newNode,oldNode)
首先通过旧节点定位到父节点，然后用新的节点替换旧节点
cloneNode()
复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构
function replaceNode () {
//1.获取旧的节点
var span = document.getElementById("span1");
//2.创建一个新的节点
var div = document.createElement(‘div‘);
div.innerHTML = "这是新的节点";
//3.用新节点替换旧节点
span.parentNode.replaceChild(div,span);
}
//复制节点
function copy () {
//1.获取要复制的元素
var ul = document.getElementById("ul1");
//2.复制
var ul2 = ul.cloneNode(true);
//3.将复制好的内容添加到div中
document.getElementById("div1").appendChild(ul2);
}
删除节点
removeChild()
从元素中删除子节点
格式：
要被删除的元素.parentNode.removeChild(要删除的元素)
function delSpan () {
var span = document.getElementsByTagName("span")[0];
span.parentNode.removeChild(span);
}
节点的属性
1）innerHTML
获取文本内容，元素节点使用,文本节点不能使用(使用 nodeValue)。
innerHTML在设置值时可以识别字符串中的html代码并执行
2）innerText
获取文本内容，从起始位置到终止位置的内容, 但它去除Html标签
3）firstChild
获取当前元素节点的第一个子节点
4）lastChild
获取当前元素节点的最后一个子节点
4）nextSibling
获取当前节点的后一个同级节点
5）previousSibling
获取当前节点的前一个同级节点
6）parentNode
获取当前元素的父节点
7）childNodes
获取当前元素的所有子节点
操作元素的属性
1）通过获取元素对象来操作属性
如：
var txt =document.getElementById("txt");
txt.id、txt.value......
2）通过方法来操作属性
获取：getAttribute()
设置：setAttribute()
删除：removeAttribute()
----------
获取标签之间的文本：
innerHTML innerText
获取表单元素的值时：
value
var txt = document.getElementsByTagName("input")[0];
//获取元素属性
console.log(txt.type);
console.log(txt.getAttribute("type"));
//设置元素的属性
txt.value = "123456";
txt.setAttribute("type","password");
//删除属性
document.getElementsByTagName("a")[0].removeAttribute("href")
以上是关于DOM的主要内容，如果未能解决你的问题，请参考以下文章
DOM事件： DOM事件级别DOM事件流DOM事件模型DOM事件捕获过程自定义事件