节点操作

节点操作

一、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);
        }