简介
1. 简介
DOM: document Object Model 文档对象模型
DOM 是针对HTML文档的一个API应用程序接口
DOM给了一个层次话的节点树
DOM 允许开发人员对页面的某一部分进行 超找,修改,删除,添加等功能
DOM 操作HTML(分4 个页面)
1. JS修改所有的HTML元素
2. JS修改所有的HTML属性
3. JS修改所有的HTML样式
4. JS能够对页面所有的事件作出反应
DOM查找
<p id ="idP" ></p>
<span class ="mySpan" ></span>
<a href="" name ="myA" ></a>
<div ></div >
<div ></div >
<div class ="myDiv" >
<p></p>
<p></p>
</div >
document.getElementById("idP" );
document.getElementsByClassName("mySpan" );
通过class 的名字获取,即使结果有一个,返回的也是 数组
document.getElementsByName("myA" );
document.getElementsByTagName("div" );
利用CSS选择器获取一个标签(返回值是数组)
document.querySelectorAll("" ); id class 取值
后三种方式,只能在IE8+ 使用
DOM节点
<div > 我是标签</div >
<script type ="text/javascript" >
节点 :由标签,文本(汉字、回车),注释 组成
console.log(document.body.childNodes);
注意: 在一起的文字和回车算一个文本节点
各个节点类型的值:(使用节点对象 .nodeType)
1 : 代表 标签 -> (div, p, script 等等)各个节点英文名
3 : 代表 文本 -> text
8 : 代表 注释 -> comment
获取节点
<div id ="myDiv" > 我是DIV</div > hh
<p > 上面说的是假的</p >
<script type ="text/javascript" >
var a = document.body.childNodes;
var brr = document.body.children;
var myDiv = document.getElementById("myDiv" );
var nextNode = myDiv.nextSibling;
--------------------------------------------
nextSibling属性与nextElementSibling属性的差别:
nextSibling
(包括文本节点、注释节点即回车、换行、空格、文本等等);
nextElementSibling
属性只返回元素节点之后的兄弟元素节点(不包括文本节点、注释节点);
----------------------------
var fatherNode = myDiv.parentNode;
var result = document.body.firstChild;
var nName = document.body.firstChild.nodeName;
console.log(nName);
if (nName == "INPUT" ){
alert(123 );
}
增删改节点
<div id ="myDiv" >
<p > 孙子1号</p >
<p > 孙子2号</p >
</div >
<script type ="text/javascript" >
document.createElement("div" );
document.createTextNode("啊啊啊" )
var te = document.createTextNode("te" );
var myDiv = document.getElementById("myDiv" );
var theP = document.createElement("p" );
document.body.insertBefore(theP,myDiv);
var myDiv = document.getElementById("myDiv" );
var theImg = document.createElement("img" );
theImg.src = "../Day03for循环/王俊.jpg" ;
var myDiv = document.getElementById("myDiv" );
var cloneDiv = myDiv.cloneNode(true );
操作DOM属性
<style type ="text/css" >
.myDiv {
width : 200 px ;
height : 200 px ;
background : firebrick ;
}
</style >
</head >
<body >
<div id ="" > </div >
<script type ="text/javascript" >
var d = document.getElementsByTagName("div" )[0 ];
d.setAttribute("class" ,"myDiv" );
console.log(d.getAttribute("class" ));
d.removeAttribute("class" );
console.log(d.getAttribute("class" ));
</script >
</body >
利用属性操作方法,把第一张 赋予 第二张
<img src ="001.jpg" id ="myImg" />
<img src ="" id ="secondImg" />
<script type ="text/javascript" >
var first = document.getElementById("myImg" );
var second = document.getElementById("secondImg" );
a = first.getAttribute("src" );
second.setAttribute("src" , a);
</script >
getAttribute和点访问的区别
<img src ="../Day05冒泡/home/0.jpeg" id ="myImg" />
<script type ="text/javascript" >
var theImg = document.getElementById("myImg" );
console.log(theImg.className);
不管是 用点还是getAttribute 都能获取
点设置的属性 点可以读出来 点不能和前者混合使用
</script >
获取非行间样式的方法
<style type ="text/css" >
#myDiv {
width : 100 px ;
height : 100 px ;
background-color : green ;
}
</style >
</head >
<body >
<div id ="myDiv" > </div >
<script type ="text/javascript" >
var myDiv = document.getElementById("myDiv" );
var result = getComputedStyle(myDiv, null ).width;
console.log(result);
var res = myDiv.currentStyle.width;
console.log(res);
</script >
</body >
图片预加载
图片预加载:在有很多图片的时候,如果在一起用户需要等待的时间比较长,
给用户的感觉不是很好,所以我们要让【图片预先加载到内存中】,
如果需要显示在页面上,直接显示
<script type ="text/javascript" >
var img = document.createElement("img" );
img.src = "J147-67-大幅风景19.jpg" ;
img.onload = function () {
var theImg = document.createElement("img" );
theImg.src = "J147-67-大幅风景19.jpg" ;
document.body.appendChild(theImg);
}
</script >
标题
这里写代码片