DOM
一、DOM
【概念】DOM:documnet object model 文档对象模型
【注】“W3C”文档对象模型（DOM）是中立于平台和语言的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式
1、DOM中节点种类
<div title="属性节点">测试DIV</div>
元素节点
属性节点 title=“属性节点”
文本节点 测试DIV
1、DOM:document object model 文档对象模型
2、属性：文本节点，元素节点、类节点
3、查找元素几点的方法
（1）document.getElementById(id)
【功能】通过当前元素节点的id,获取对应元素节点
元素节点属性：
通过这个节点对象，访问它的一系列属性 
HTML属性的属性
访问这些属性：元素节点.属性名/元素节点[属性名]
【注】在style样式中，background-color 使用-链接的属性，访问时去掉-，并后续单词的首字母大写
document.getElementById(“id”).style.backgroundColor=“red”;
例：
window.onload=funciton(){
var oDiv=documnet.getElementById('div1');
alert(oDiv);
}
(2)document.getElementsByTagName();
【注】从node节点开始，找出所有符合条件的元素节点。
【参数】:标签名
【功能】：获取当前页面上所有符合该标签名标准的元素节点
【返回值】：一个装有符合条件的元素节点的数组
<script type="text/javascript">
window.onloag=function(){
//获取当前页面上所有的li标签
var aLis=document.getElementByTagName("li");
alert(aLis.length)//4
}
//第二种方法获取页面上所有的li标签
var oUl=document.getElementById("ul1");
var aLis=oUl.getElementsByTagName('li');
//打印出标签内的内容
for(var i=0;i<aLis.length;i++){
console.log(aLis[i].innerHTML);
//等同于
console.log(aLis.item(i).innerHTML);
}
</script>
<body>
<ul id="ul1">
<li>11111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
（3）document.getElementsByName()
【参数】：name的值
【返回值】:装有符合条件的元素节点的数组
【注】name属性一般情况下，只有文本输入框的元素节点才有
<script type="text/javascript">
window.onload=function(){
var nodes=document.getElementsByName("hello");
alert(nodes);//object NodeList
alert(nodes.length);//3
var oDiv=document.getElementById("div1");
var node=oDiv.getElementsByClassName("hello");//报错，ODiv没有getElementsByClassName属性
}
</script>
<body>
<div name="hello"></div>
<span name="hello"></span>
<input name="hello"/>
<div id="div1"><div name="hello"></div></div>
</body>
（4）node.getElementByClassName()
[功能]:获取node节点下,所有符合条件的元素节点
[参数]:class
返回值:所有符合条件的元素节点组成的数组
[注]getElementsByClassName在低版本浏览器不支持
window.onload=function(){
var nodes=document.getElementsByClassName("box");
alert(nodes);//object HTMLCollection
alert(nodes.length);
for(var i=0;i<nodes.length;i++){
alert(nodes[i].innerHTML);
}
}
[importance :封装函数]!!!----各种浏览器都可使用的方法
//*通配符 任意类型的元素节点
function elementByClassName(parent,classStr){
//<1>找到parent下所有的元素节点
var nodes=parent.getElementsByTagName('*');
var result=[];
for(var i=0;i<nodes.length;i++){
//<2>如果符合条件,添加到数组中
if(nodes[i].className==classStr){
result.push(nodes[i]);
}
}
return result;
}
4.获取当前样式
<body>
<div id="div1" style="width:300px;height:300px"></div>
</body>
<style>
#div1{
background-color:red;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
//获取style中width属性
console.log(oDiv.style.width);//300
console.log(oDiv.style.backgroundColor);//获取不到背景属性
//说明:::通过上述操作,我们只能获取行间的css颜色
/*
获取当前有效样式
getComputedStyle(元素节点)[获取样式类型];
[支持浏览器]:火狐/谷歌/safari(苹果浏览器)支持
元素节点.currentStyle[获取样式类型];
[支持浏览器]:IE
*/
console.log(getComputedStyle(oDiv)["width"]);
//获取当前样式的兼容函数
function getStyle(elem,attr){
return elem.currentStyle[attr]?elem.currentStyle[attr]:getComputedStyle(elem)[attr];
}
}
</script>
5.获取元素节点
<script type="text/javascript">
/*
id document.getElementyById();
tagName document.getElementsByTagName();
name document.getElementsByName();
className document.getElementsByClassName();
*/
/*
通过封装函数 简化上述的操作
封装一个函数,可以拥有上述几种获取元素节点的功能
[注] css选择器
#id 通过id获取元素节点
.class 通过className获取元素节点
tagName 通过tagName获取元素节点
name=xxx 通过name获取元素节点
*/
//封装函数
function $(vArg){
//<1>对参数进行区分
switch(vArg[0]){
case "#"://id
return document.getElementById(vArg.substring(1));
break;
case "."://calssName
return elementByClassName(document,vArg.substring(1));//封装好的方法
break;
default :
//对参数的前五个字符,进行判断
var str=vArg.substring(0,5);
if(str=="name="){
return document.getELementsByName(vArg.substring(1));
}else{
return document.getElementsByTagName(vArg);
}
break;
}
}
function elementByClassName(parent,classStr){
//<1>找到parent下所有的元素节点
var nodes=parent.getElementsByTagName('*');
var result=[];
for(var i=0;i<nodes.length;i++){
//<2>如果符合条件,添加到数组中
if(nodes[i].className==classStr){
result.push(nodes[i]);
}
}
return result;
}
</script>
6.DOM节点方法
6.1.set/getAttribute()方法
[概念]getAttribute()方法将获取元素中某个属性的值,它和直接使用.属性获取属性值的方法有一定区别
documen.getElementById("box").getAttribute("id");//获取元素的id值
document.getElementById("box").id;//获取元素的id值
document.getElementById("box").getAttribute("mydiv");//获取元素的自定义属性值
document.getElementById("box").mydiv;//获取元素的自定义属性值
document.getElementById("box").getAttribute('class');//获取元素的class值
document.getElementById("box").getAttribute('className')
<script>
/*
set/getAttribute()
removeAttribute()
[注]都是操作当前元素节点中某个属性
//通过以下操作可知,点操作与Attribute操作的区别
<1>class属性范围区别,点操作是通过className,而set/getAttribute是通过class
<2>set/getAttribute是支持用户自定义属性的
<3>removeAttribute
*/
window.onload=function(){
var oDiv=document.getElementById("div1");
//点操作获取
console.log(oDiv.title);//hello
console.log(oDiv.className);//box
//点操作 赋值
oDiv.title="xxx";
oDiv.className="xxx";
//Attribute操作 获取
console.log(oDiv.getAttribute("title"));
//Attribute操作 赋值
console.log(oDiv.setAttribute("title","xxx"));
//设置用户自定义属性
oDiv.xxx="yyy";
oDiv.setAttribute("xxx","yyy");
console.log(oDiv.xxx);//不存在
console.log(oDiv.getAttribute("xxx"));//获取成功
//移除某个属性
oDiv.removeAttribute("title");
//点操作 只能清空某个属性
oDiv.title="";
}
</script>
<body>
<div id="div1" title="hello" name="world" class="box"></div>
</body>
7.元素节点属性
7.1childNodes
获取当前元素节点的所有的子节点;包含两种节点1.文本节点;2.元素节点
<div id="div1"><em>斜体</em>文本内容<strong>粗体</strong></div>
/*
DOM节点类型
元素节点 文本节点 属性节点
属性:nodeName/nodeType/nodeValue
*/
window.onload=function(){
var oDiv=document.getElementById("div1");
//object NodeList 装有当前元素节点的所有的子节点
console.log(oDiv.childNodes.length);//3 如果换行,回车也会包含
}
7.2节点属性
| 节点类型 | nodeName | nodeType | nodeValue |
|---|---|---|---|
| 元素 | 元素名称 | 1 | null |
| 属性 | 属性名称 | 2 | 属性值 |
| 文本 | #text | 3 | 文本内容(不包含html) |
7.3 firstChild 快速当前元素节点子节点的第一个
lastChild 快速找到元素节点子节点的最后一个
alert(oDiv.firstChild.nodeName);//EM
alert(oDiv.lastChild.nodeName);//strong
7.4删除元素节点的空格
<body>
<div id="div1">
<em>斜体</em>
文本内容
<strong>粗体</strong>
</div>
</body>
window.onload=function(){
var oDiv=document.getElementById("div1");
console.log(oDiv.childNodes.length);//5(包含空格.回车)
}
/*问题:如何将空白节点取出
[注]识别出空白节点
/`\s+$/.test()
使用左侧的正则进行验证,如果是空白节点,返回true,否则返回false
*/
//删除空白节点
function removeSpaceNode(nodes){
var result=[];//用于存放不是空白节点的节点
for(var i=0;i<nodes.length;i++){
if(node[i].nodeType==3&&/`\s+$/.text(nodes[i].nodeValue)){
continue;
}
result.push(nodes[i]);
}
return result;
}
//通过父节点来删除空白节点
[注]删除数组元素时,必须倒序删除
[原因]如果顺序删除,后面的数据会占据删除的位置index,导致无法判断被占据的位置
function removeSpaceNode2(parent){
var nodes=parent.childNodes;
//
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType='3'&&/`\s+$/.test(nodes[i].nodeValue)){
//删除空白节点
parent.removeChild(nodes[i])
}
}
}
8.ownerDocument属性
[注]ownerDocument 属性返回该节点的文档对象根节点,返回的对象相当于document
[属性]parentNode/previousSibling/nextSibling
[解析]parentNode:属性返回该节点的父节点
previousSibling:属性返回该节点的前一个同级节点
nextSibling:属性返回该节点的后一个同级节点
window.onload=function(){
var oDiv=document.getElementById('div1');
console.log(oDiv.ownerDocument==document);//true
console.log(oDiv.parentNode.nodeName);//BODY
console.log(oDiv.previousSilbing.nodeName);//会有空白节点,进行删除空白节点操作
removeSpaceNode2(oDiv.parentNode);
console.log(oDiv.previousSilbing.nodeName);//SPAN
}
<span></span>
<div id='div1'></div>
9.元素节点属性
属性节点:attribute—返回该节点的属性节点集合
<div id='div1' title='hello' name='world' class='box'></div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
