关于DOM和节点的问题(未完待续...)

来源：互联网发布：linux常见的服务器配置编辑：程序博客网时间：2024/05/17 06:46

一：元素节点
1.创建元素节点对象
Element = document.createElement('元素节点');
A.Java脚本属于弱语言，可以定义所有变量。所以用---- var 元素节点名称可以接受所有节点元素
B.document是Node下的一个子节点。可以创建所有元素节点！只需要在createElement方法中加入'元素节点名称'即可。例： document.createElement('p'); --创建一个<p>元素节点对象

2.设置元素节点属性
A.每个元素节点都有属性设置。例如<img>元素节点对象，这里举例<img>元素对象的属性设置：
//创建img元素节点对象
var imgEle = document.createElement('img');//告诉html我们要创建一个img的元素节点对象
//设置属性
imgEle.setAttribute('src','url');//第一个参数为img元素的属性，第二个参数为属性的值。
B.创建元素和获取设置属性。就和在<body>中设置<img>一样

3.创建复杂元素节点(<table>、<ol>、<ul>)
为什么说这些事复杂元素节点，因为他们的里面有子元素。举例<table>元素节点对象：
A.我们需要把<table>中的<tr>行元素和行内<td>列元素创建然后放入<table>元素对象中：
//1.1 创建table对象
var tableEle = document.createElement('table');
//1.2 创建tr对象
var trEle = document.createElement('tr');
//1.3 创建td对象
var tdEle = document.createElement('td');
//2.1 把td对象追加到tr对象
trEle.appendChild(tdEle);
//2.2 把tr对象追加到table对象
tableEle.appendChild(trEle);
//2.3 把table对象追加到body对象
document.body.appendChild(tableEle);

---- 这样我们就创建了一个表格对象。但是表格显示不出来，所以我们需要加入文本节点对象。

//1.1 创建table对象
var tableEle = document.createElement('table');
//1.2 创建tr对象
var trEle = document.createElement('tr');
//1.3 创建td对象
var tdEle = document.createElement('td');
//1.4 创建文本节点
var txtNode = document.createElement('这里输入文本内容');
//2.1 将文本节点追加到td对象内
tdEle.appendChild(txtNode);
//2.2 把td对象追加到tr对象
trEle.appendChild(tdEle);
//2.3 把tr对象追加到table对象
tableEle.appendChild(trEle);
//2.4 把table对象追加到body对象
document.body.appendChild(tableEle);

B.文本节点可以追加到需要文本的对象元素中。比如：<p>、<li>、<hn>

---- 要记住，想要做出多行多列的表格需要加上for循环！这里不列出来了，只要记住创建列到追加到行对象中是一个for循环；然后创建行到追加表对象中是一个for循环。

4.在两个元素节点对象中插入一个段落元素节点对象。插入元素节点对象，需要有‘参照物’，插入在‘参照物’之前。我们这里需要给参照物一个id属性！
<head>
.......
.......
<script type="text/javascript">
function insertElement(){
//1.创建段落节点
var pEle = document.createElement('p');
//2.创建文本节点
var txtNode = document.createTextNode('我是段落2');
//3.获取‘参照’节点
var refPEle = document.getElementById('refP');
//4.添加到body元素,并且在参照段落之前
document.body.insertBefore(pEle.appendChild(txtNode),refPEle);
}
</script>
</head>
<body>
<p>我是段落1</p>
<p id='refP'>我是段落3</p>
<input onclick="insertElement()" type="button" value="向段落3之前插入一个段落" />
</body>

A.document.body.insertBefore(subElement,refElement); document下的插入节点方法。第一个参数为需要插入的节点，第二个参数为参照节点。

0 0