节点操作
节点操作
一、write()
可以把任意一个标签或者字符插入文本中
二、createElement()
创建一个元素节点
三、appendChild()
添加一个新的节点到已知节点的末尾
四、createTextNode()
创建一个文本节点
五、insertBefore()
创建节点到已知指定节点的前面
六、removeChild()
删除节点
七、cloneNode()
复制节点
八、replaceChild()
替换节点
九、document.xxxx
body部分
<div title="属性节点" id="d1" class="dc1">文本节点</div>
<div title="属性节点2" style="color: yellow" id="d2" class="dc2">文本节点2</div>
<div title="属性节点" id="张三d1" class="dc1">文本节点3</div>
<span name="d1">文本节点3</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input name="i1" value="今天是最后一天">
<input name="i1" value="明天就放假了">
1.document.getElementById()
获取特定的Id元素的节点
window.onload = function () {
var id = document.getElementById("d1");
console.log(id);
id.style.color = 'red';
console.log("id.tagName : "+id.tagName);
console.log("id.id : "+id.id);
console.log("id.title : "+id.title);
console.log("id.style.color : "+id.style.color);
console.log("id.className : "+id.className);
console.log("id.style : "+id.style);
id.innerText = '飒飒打撒'
};
2.document.getElementsByTagName()
获取相同元素的节点列表
window.onload = function () {
var d1 = document.getElementsByTagName("*");
console.log(d1);
console.log(d1.length);
console.log(d1[0].tagName);
};
3.document.getElementsByName()
获取相同名称/Name的节点列表
window.onload = function () {
var d1 = document.getElementsByName("d1");
console.log(d1);
var i1 = document.getElementsByName("i1");
console.log(i1);
};
4.document.getAttribute()
获取特定元素节点属性的值
window.onload = function () {
var b = document.getElementById('张三d1').getAttribute('id');
var b1 = document.getElementById('张三d1').id;
console.log(b);
console.log(b1);
};
5.document.setAttribute()
设置特定元素节点属性的值
window.onload = function () {
var c = document.getElementById('张三d1').setAttribute('align',"center");
var d = document.getElementById('张三d1').setAttribute('aaa','bbb');
console.log(c);
console.log(d);
};
6.document.removeAttribute()
删除特定元素节点属性
window.onload = function () {
var e = document.getElementById('d2').removeAttribute('style');
console.log(e);
}