js的dom对象

最新推荐文章于 2024-07-16 19:32:16 发布

katy的小乖

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量1k

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/u010918487/article/details/47135701

版权

javaWeb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

解析过程：

根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象。

----document对象：整个文档

----elsment对象：标签对象

---属性对象

---文本对象

---Node节点对象：这个对象是这些对象的父对象

如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

DHTML:是很多技术的总称。（面试）

html:封装数据

css:使用属性和属性值设置样式

dom:操作html文档(标记型文档)

javascript:专门指的是js的语法语句（ECMAScript）

常用方法：

1.write():向页面输出变量

向页面输出html代码

2.getElementById():

通过id得到元素(标签)

var input1 = document.getElementById("name");//使用getElementById()得到input标签

alert (input1.name);//得到input里面的value值

input1.value = "aaaa";//向input里面设置一个值value

3.getElementByName():

//通过标签的name属性值得到标签，返回的是一个集合(数组)

var arr = document.getElementsByName("username");//得到input标签

//遍历数组

for( var i = 0 ; i < arr.length ; i++){//通过遍历数组得到每个标签里的具体值

var str = arr[i]; //每次循环得到arr对象，赋值到str里面

alert(str.value);//得到每个input标签里面的value值

}

****当只有一个元素时就不需要遍历，而是可以直接通过数组的下标获取到值

var str1 = document.getElementByName("username")[0];

案例：

</ul>

在末尾添加节点：

function add (){

var ul1 = document.getElementById("ulid");//获取到ul标签

var li1 = document.createElement("li");//创建标签

var text1 = document.createTextNode("dddd");//创建文本（这里可以这样：li1.innerHTML="dddd";）

li1.appendChild(text1);//把文本加入到li下面

ul1.appendChild(li1);//把li加入到ul下面

步骤：1.先获取ul标签

2.创建li标签:document.createElement("标签名");

3.创建文本：docuemnt.createTextNode("文本内容")

4.把文本添加到li下面：使用appendChild()方法

5.把li添加到ul末尾：使用appendChild()方法

}

元素对象（element对象）:首先要回去到element：

获取属性里面的值：getAttribute("属性名称");

设置属性名称和属性值：setAttribute("属性名称","值");

删除属性：removeAttribute("属性名称");

---不能删除value

案例：获取ul标签下所有的子标签(子元素)

</ul>

//1.获取ul标签

var ull = document.getElementById("ulid");

//2.获取ul下面的子标签

var lis = ull.childNodes();

alert(lis.length);//不同的浏览器解析方式不一样，长度不同，浏览器兼容性很差

//如何得到准确的子标签的数量？通过getElementsByTagName()：兼容性很好，是获取标签下子元素的唯一有效的方法

var lis2 = ull.getElementsByTagName("li");

alert(lis2.length);

想要获取标签下子标签：

使用属性：childNodes,但这个属性兼容性很差

获取标签下子标签的唯一有效办法：使用getElementsByTagName()

Node对象属性：

*nodeName

*nodeType：span的nodeType值为1,id的nodeType值为2，text的nodeType值为3

*nodeValue

使用dom解析html的时候，需要html里的标签，属性和文本都封装成对象

标签节点对应的值：

nodeType:1

nodeName:大写标签名称

nodeValue:null

属性节点对应的值：

nodeType:2

nodeName:属性名称

nodeValue:属性的值

文本节点对应的值：

nodeType:3

nodeName:#text

nodeValue:文本内容

Node属性：

父节点：parentNode

子节点：childNodes(所有子节点，但是兼容性很差)，firstChild,lastChild

同辈节点：nextSibling:返回一个给定的下一个兄弟节点。

previousSibling:返回一个给定节点的上一个兄弟节点

</ul>

//获得父节点，ul

var li1 = document.getElementById("li1");

var ul1 = li1.parentNode;

//获得ul的第一个子节点：

var ul1 = document.getElementById("ulid");

var li1 = ul1.firstChild;

//得到ul的最后一个子节点：

ul1.lastChild;

//获取li2的上一个和下一个兄弟节点：

var li2 = document.getElementById("li2");

alert(li2.nextSibling.id);

alert(li2.previousSibling.id);

操作dom树：

appendChild:添加子节点到末尾，可实现剪切粘贴效果

//appendChild的剪切粘贴效果

insertBefore(newNode,oldNode)：通过父节点在节点之前插入一个新的节点(需要传入两个参数)

</ul>

</div>

</div>

var div2 = document.getElementById("div2");//得到div2

var ul1 = document.getElementById("ulid");//获取ul

div2.appendChild(ul1);//把ul添加到div2里面

//最后结果显示：div1里面的ul标签不见了，全部在div2里面了，就相当于剪切粘贴功能

</script>

删除节点：removeChild()

首先获得父节点(通过id或者通过parentNode)，再获得要删除的节点，最后父节点.removeChild()

替换节点：replaceChild(newChild,oldChild)：通过父节点进行替换

1.获取要被替换的标签

2.创建新的标签:createElement()

3.创建文本createTextNode()

4.把文本添加到新创建的标签下面：appendChild()

5.获取父标签：通过id或者通过parentNode

6.执行替换操作:replaceChild(xx)

复制节点：cloneNode(boolean)

1.获取ul

2.执行复制方法：cloneNode(true)

3.把复制之后的内容放在div里面：

--获取div

--appendChild()方法

</ul>

</div>

</div>

//获取ul:

var ull = document.getElementById("ulid");

//复制ul,放到类似于剪切板里面

var ulCopy = ull.cloneNode(true);

//获取到div2

var divv = dpcument.getElementById("div2");

//把副本放到div里面去:不再是原始的ul,而是一个副本

divv.appendChild(ulCopy);

操作DOM总结：

1.获取节点：getElementById(),getElementsByName(),getElementsByTagName()

2.插入节点：insertBefore():在某个节点之前插入

appendChild(newChild,oldChild):在末尾添加，也可以实现剪切复制功能

3.删除节点：removeChild(xx)

4.替换节点：replaceChild(newChild,oldChild)

innerHTML:

1.获取文本内容：

2.向标签里面设置内容

var span1 = document.getElementById('sid');

alert(span1.innerHTML);//获取文本内容

var div1 = docuent.getElementById('div1');

div1.innerHTML = "<h1>心情不好</h1>";//向标签里面设置内容

//练习：

var tab = "<table border ='1'><tr><td>aaaa</td></tr><tr><td>bbbb</td></tr><tr><td>cccc</td></tr></table>";

var table = '<table>';

tab += '</table>';//相当于var table = '<table></table>';

div1.innerHTML = tab;

案例：动态显示时间

*得到当前时间：

var date = new Date();

var d1 = date.toLocalString();

*需要让页面每一秒获取时间

setInterval()方法，定时器

*显示到页面上

每一秒向div里面写一次时间：使用innerHTML属性

function getD(){

//当前时间：

var date = new Date();

//格式化

var d = date.toLocalString();

//获取div

var div1 = document.getElementById('times');

div1.innerHTML = d;

}

//使用定时器实现每一秒写一次时间

setInterval("getD()",1000);

全选练习：

创建一个页面：复选框和按钮

下拉列表左右选择：

select里面的一个属性multiple可以实现里面所有内容都显示可以选择多个，默认只会显示一个且只能选择一个

选中添加到右边：

   1.获取select1里面的option--getElementsByTagName()
--遍历数组，得到每一个option
  2.判断是否被选中-selected=true(选中)，selected = false(没有选中)
  3.如果选中，把选中的添加到右边去
4.得到select2
5.添加选择的部分：appendChild()

//获取select1里面的option
//得到select1
var select1 = document.getElementById("select1");
//获取select2
var select2 = document.getElementById("select2");
//得到option
var options1 = select1.getElementsByTagName("option");
for( var i = 0 ; i < options1.length ; i++){
//第一次循环，i:0，length:5
//第二次循环，i:1,length:4
//第三次循环：i:2,length:3
//办法:i--:让i值不变，变化的是length，否则会出现有的项循环不到
var option1 = options1[i];//得到每一个option对象
//判断是否被选中
if(option1.selected==true){
//添加到select2里面
select2.appendChild(option1);
i--;//保证循环一直下去，否则会有几次循环执行不到
}

}
}

//全部添加到右边：

1.获取第一个select下边的option
2.返回数组，遍历数组
3.得到每一个option对象
4.得到select2
5.添加到select2下面(不需要判断)

var s1 = document.getElementById("select1");
var s2 = document.getElementById("select2");
var ops = s1.getElementsByTagName("option");
for(var j = 0 ; j < ops.length ; j++){
var op1 = ops[j];
s2.appendChild(op1);
j--;
}
}

案例：省市联动

select的改变事件：onchange()

创建二维数组：存储数据；

每个数组的第一个元素是国家名称，后面的元素是国家里的城市

<body>

<select id="country" οnchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="city">
</select>
<script type="text/javascript">
//创建数组存储数据：二维数组
var arr = new Array(4);
arr[0] = ["中国","北京","上海","深圳","广州","杭州"];
arr[1] = ["美国","纽约","休斯敦","底特律","华盛顿"];
arr[2] = ["德国","慕尼黑","柏林","法兰克福"];
arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];
function add1(val){
/*
1.遍历二维数组
2.得到的也是一个数组（国家对应关系）
3.拿到数组中的第一个值和传递过来的值做比较
4.如果相同，获取到第一个值后面的元素
5.得到id为city的select
6.添加：appendChild()
创建option三步：(创建标签，创建文本，添加文本)
创建标签option：createElement(),创建文本createTextNodes(),把文本添加到option里
*/
/*
由于每次都要向city里面添加option，第二次添加相当于追加
应该在每次添加之前，判断一下city里面是否有option，如果有，就删除
*/
//获取city的select
var city = document.getElementById('city');
//得到city里面的option
var cityOptions = city.getElementsByTagName('option');
for( var m = 0 ; m < cityOptions.length ; m++){
//得到每一个option
var op = cityOptions[m];
//通过父节点删除这个option
city.removeChild(op);
m--;//保证循环一直执行下去
}
for( var i = 0; i< arr.length ; i++){
//得到二维数组里的每一个数组
var arr1 = arr[i];
//得到遍历之后的数组的第一个值
var firstValue = arr1[0];
//判断传递过来的值和第一个值是否相同
if(firstValue == val){
//得到第一个值后面的元素
//遍历arrElements
for( var j = 1 ; j < arr1.length ; j++){
var value1 = arr1[j];//得到城市的名称
//创建option
var option1 = document.createElement('option');
//创建文本
var text1 = document.createTextNode(value1);
//把文本添加到option1里面
option1.appendChild(text1);
//添加值到city里面
city.appendChild(option1);

}
}
}
}
</script>
</body>

动态生成表格：
<body>
行：<input type="text" id="rows"/>
列：<input type="text" id="columns"/><br/>
<input type="button" value="生成" οnclick="generate();"/>
<div id="content" style="width:400px;height:100px;background:#eee;"></div>
<script type="text/javascript">
function generate(){
/*
1.得到输入的行和列
2.生成表格：
循环行
在行里面循环单元格
3.显示到页面：
把表格的代码设置到div里面
使用innerHTML
*/
var rows = document.getElementById('rows').value;
var columns = document.getElementById('columns').value;
//把表格代码放到一个变量里面
var tab = "<table border='1' bordercolor='yellow' cellspacing='0'>";
//循环行
for(var i = 1 ; i<= rows ; i++){
tab += '<tr>';
//循环单元格
for( var j = 1; j <= columns ; j++){
tab += '<td>aaaaa</td>';
}
tab += '</tr>';
}
tab += '</table>';
//得到div标签
var content = document.getElementById('content');
//把table的代码设置到div里面去
content.innerHTML = tab;
}
</script>
</body>