DOM
DOM(文档对象模型)是JavaScript中的一部分,它和ECMAscript核心,BOM(浏览器对象模型)组成完整的JavaScript。
DOM 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”(要是没有W3C制定标准,每个浏览器对图片定义不同的标签,那针对每个浏览器要写不同的代码,这个肯定是行不通的)
W3C DOM 标准被分为 3 个不同的部分:1,核心 DOM - 针对任何结构化文档的标准模型;2,XML DOM - 针对 XML 文档的标准模型;3,HTML DOM - 针对 HTML 文档的标准模型
事件是什么:HTML DOM 允许 JavaScript 对 HTML 事件作出反应。简而言之,事件就是用户和浏览器之间的交互行为,比如点击按钮(onclick),鼠标移动(onmousemove)…
//点击按钮事件
<script>
window.onload=function(){ //onload 一张页面或一幅图像完成加载。
var but1=document.getElementById('a');//getElementById() 返回对拥有指定 id 的第一个对象的引用。
//绑定一个单击事件
//像这种单击事件绑定的函数,称为单击响应函数
but1.onclick=function(){ //onclick 当用户点击某个对象时调用的事件句柄。
alert("nihao~");
};
}
</script>
<button id="a">a1</button>
节点
通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。
方法和属性
1,方法:
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。
方法是您能够执行的动作(比如添加或修改元素)。
属性是您能够获取或设置的值(比如节点的名称或内容)。
常用对象方法:
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
2,属性
nodeName 属性规定节点的名称。
•nodeName 是只读的
•元素节点的 nodeName 与标签名相同
•属性节点的 nodeName 与属性名相同
•文本节点的 nodeName 始终是 #text
•文档节点的 nodeName 始终是 #document
tips:nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
•元素节点的 nodeValue 是 undefined 或 null
•文本节点的 nodeValue 是文本本身
•属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有:
元素 1
属性 2
文本 3
注释 8
文档 9
通过Document对象获取元素节点
<script>
// 1,getElementById() 返回对拥有指定 id 的第一个对象的引用。
window.onload=function(){ //onload 一张页面或一幅图像完成加载。
var but1=document.getElementById('a');//getElementById() 返回对拥有指定 id 的第一个对象的引用。
//绑定一个单击事件
//像这种单击事件绑定的函数,称为单击响应函数
but1.onclick=function(){ //onclick 当用户点击某个对象时调用的事件句柄。
alert("nihao~");
};
}
</script>
<button id="a">a1</button>
<script>
// 2,getElementsByName() 返回带有指定名称的对象集合。
window.onload=function(){
var bt2=document.getElementsByName("hao");
alert(bt2.length);
}
</script>
<input name="hao" type="text" />
<input name="hao" type="text" />
<input name="hao3" type="text" />
<input name="hao2" type="text" />
<input name="hao1" type="text" />
<script>
//3,getElementsByTagName() 返回带有指定标签名的对象集合。
var bt3=document.getElementsByTagName("input");
alert(bt3.length);
</script>
tips:如果需要直接读取元素节点属性,直接采用元素.属性名,如:元素.name,元素.value(但是class属性不能采用这种方法,读取class属性需要使用元素.className
通过具体元素节点调用获取元素节点的子节点
<li id="hao11">
<input name="hao" type="text" />
<input name="hao" type="text" />
<input name="hao3" type="text" />
<input name="hao2" type="text" />
<input name="hao1" type="text" />
</li>
<p name="hao2"> <input name="hao" type="text" />
<input name="hao" type="text" />
<input name="hao3" type="text" />
<input name="hao2" type="text" />
<input name="hao1" type="text" /></p>
<a name="hao3"> <input name="hao" type="text" />
<input name="hao" type="text" />
<input name="hao3" type="text" />
<input name="hao2" type="text" />
<input name="hao1" type="text" /></a>
<a name="hao4"> <input name="hao" type="text" />
<input name="hao" type="text" />
<input name="hao3" type="text" />
<input name="hao2" type="text" />
<input name="hao1" type="text" /></a>
<li name="hao5">&</li>
<script>
//1,getElementsByTagName,id为hao11下面input标签
var btn1=document.getElementById("hao11");
var tag=btn1.getElementsByTagName("input");
alert(tag.length);
//2,childNodes,获取包括文本节点在内的所有节点,标签之间的空白也算文本节点IE8及以下不会将空白当成文本节点
var ch=btn1.childNodes;//children属性可以获取当前元素的所有子元素,不包括空白
alert(ch.length);
//3,firstChild可以获取当前元素的第一个子节点包括空白,btn1.childNodes[0]也可以
//firstElementChild可以获取第一个子元素不包括空白,但不支持IE8及以下浏览器
alert(btn1.firstChild);
//4,lastChild同上
alert(btn1.lastChild);
</script>
通过具体节点调用获取父节点和兄弟节点
<script>
//1.parentNode属性,宝石当前节点的父节点
var btn1=document.getElementsByName("hao");
var btn=btn1.parentNode;
alert(btn.innerHTML);//获取文本内容,inerText,nodeValue也可以
//2.previousSibling属性表示当前节点的前一个兄弟节点,可能获取到空白元素
var btn1=document.getElementsByName("hao4");
btn1.previousSibling;//previousElementsSibling也可以,但IE8及以下不可
//3.nextSibling同上
</script>
dom查询的其他方法
<div class="box"><div></div></div>
<div></div>
<script>
//1.document中有一个body属性,保存的是body标签的引用
var body=document.body;
//2.document.documentElement保存html根标签
var doc=document.documentElement;
//3.document.all代表页面里所有元素,document.getElementsByTagName("*")起一样效果
var all=document.all;
//4,getElementsByClassName根据元素class属性值查询一组元素节点对象,不支持IE8及以下
var box=document.getElementsByClassName("box");
//5,document.querySelector需要选择器的字符串作为参数
//根据css查询器查询元素节点对象,但只返回一个,querySelectorAll可以解决
document.querySelector(".box div");
- DOM增删改
<div id="ct">
<div id="hao">hao</div>
<div id="ni">ni</div>
<div id="shan">shan</div>
</div>
<script>
var ct=document.getElementById("ct");
var shan=document.getElementById("shan");
//1,增
//createElement() 创建元素节点,根据标签名创建并将创建好的对象返回
var li=document.createElement("li");//alert(btn)
//createTextNode() 创建文本节点
var tex=document.createTextNode("nihao");
//appendChild() 把新的子节点添加到指定父节点
li.appendChild(tex);//页面中还未出现
var hao=document.getElementById("hao");
hao.appendChild(li);
//innerHTML增加
//ct.innerHTML+="<li>good</li>";//将之前的删除在添加,在加innerHTML中的,动静太大
var li=document.createElement("li");
li.innerHTML="good";
ct.appendChild(li);
//2,删
//removeChild() 删除子节点 父节点.removeChild(子节点)
ct.removeChild(shan);//shan.parentNode.removeChild(shan)
//3,改
//insertBefore() 在指定的子节点前面插入新的子节点,父节点.insertBefore(new,old)
var li1=document.createElement("li");
var tex1=document.createTextNode("world");
li1.appendChild(tex1);
var hao=document.getElementById("hao");
ct.insertBefore(li1,hao);
//replaceChild() 替换子节点,父节点.replaceChild(new,old)
var ni=document.getElementById("ni");
ct.replaceChild(li1,ni);
</script>
注意:dom修改css
通过JS修改CSS样式的语法:元素.style.样式名=样式值比如:box1.style.width=100px
这个括号内的只能读取不能修改(只能读取内联样式):box1.style.width
(读取当前显示的样式,没有设置,获取默认值。IE浏览器支持:元素.currentStyle.样式名
其他浏览器使用getComputedStyle(获取样式的元素,传递伪元素一般为null).属性,返回一个封装当前元素对应样式的对象,若获取样式没有设置获取真实值,而不是默认值,IE8及以下不支持
所有浏览器都支持:
function getStyle(obj,name){
if(window.getComputedSytle){
return getComputedSytle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
//异曲同工
//return window.getComputedSytle?getComputedSytle(obj,null)[name]:obj.currentStyle[name];
}
)
如果出现像background-color这样的属性将-删除将后面的字母大写(驼峰命名法)。
这些通过style属性设置的样式都是内联样式,拥有较高优先级,但遇到!important就会失效
其他样式相关
1,clientWidth和clientHeight
这两个属性分别获取元素的可见宽度和高度,包括内容区域和内边距,返回不带px的数字,但只能读不能修改
box1.clientWidth;
box1.clientHeight;
2,offsetWidth,offsetHeight,offsetParent,offsetLeft,offsetRight
获取元素整个宽度和高度,包括内容区域,内边距,边框box.offsetWidth;
offsetParent获取当前元素的定位父元素,获取到当前元素最近的开启了定位的祖先元素,如果所有祖先元素都没有开启定位则返回body
offsetLeft,offsetRight获取当前元素相对于父元素的水平偏移量,垂直偏移量
3,scrollHeight 返回元素的滚动区域整体高度;scrollLeft 返回元素左边缘与视图之间的距离;scrollWidth 返回元素的滚动区域整体宽度。
scrollHeight-scrollTopclientHeight说明垂直滚动条滚动到底了
scrollWidth-scrollLeftclientWidth说明水平滚动条到底了