您的位置:首页 > 其它

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

2015-07-22 00:06 232 查看
一:元素节点

 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下的插入节点方法。第一个参数为需要插入的节点,第二个参数为参照节点。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  dom