JavaScriptDOM编程2

JavaScriptDOM编程2

DOM树

DOM 文档对象模型
document也是Element对象，并且是最上级
也就是网页中最大的父级元素(element)是 document

Node 节点对象
Element对象 HTML标签对象，也就是节点Node对象

在DOM树中同一父节点的子节点是兄弟关系
该子节点们的子节点之间没有关系
如上图中img与h1为同级关系（兄弟关系）
body与h1为父子关系，title与img没有关系

Element常用属性

父子关系中
Element.parentElement 获取父级元素

//给img的父元素设置一个背景颜色
    img.parentElement.style.background="yellow"

Element.firstElementChild 获取第一个子节点元素

//第一个子节点
    console.log(div.firstElementChild,div.lastElementChild)

Element.lastElementChild 获取最后一个子节点元素

//最后一个子节点
    console.log(div.lastElementChild,div.lastElementChild)

Element.childElementChild ，Element.children.length获取该元素中子元素的个数

 console.log(div.children.length);
 console.log(div.childElementCount);

Element.children 获取元素中所有子元素标签

console.log(div.children);

兄弟关系中
Element.previousElementSibling : 获得上一个相邻元素

Element.nextElementSibling : 获得下一个相邻元素

DOM常用方法

父元素.appendChild() 追加
document.createElement() 创建标签
父元素.removeChild()
父元素.replaceChild() 替换节点
element.cloneNode(true|false) 复制节点
element.getAttribute() 获得属性
element.setAttribute() 设置属性
下面分享一个用上面方法和属性完成的图片的增删功能

<div id="div">
    <img src="img/1.gif" alt="">
    <img id="img" src="img/2.gif" alt="">
    <img src="img/3.gif" alt="">
</div>
<script>

    //网页中最大的父级元素(element)是 document

    //parent
    console.log(img.parentElement)
    //给img的父元素设置一个背景颜色
    img.parentElement.style.background="yellow"

    //查询div中所有的子元素
    console.log(div.children);
    //知道div有几个子元素
    console.log(div.children.length);
    console.log(div.childElementCount);

    //第一个子节点
    console.log(div.firstElementChild,div.lastElementChild)

    console.log(img.previousElementSibling)
    console.log(img.nextElementSibling)
    
    function fn2() {
        //先创建一个图片标签
        var i=document.createElement("img")
        //设置标签上的属性
        //i.setAttribute("src","img/4.gif")

        //这种方式不是所有的属性都能用
        i.src="img/4.gif"

        //吧图片标签放到div中
        div.appendChild(i)
    }

    //Node Element 看作是一种东西
    function fn3() {
        //每点击一次  删除最后一张
        var i=div.lastElementChild
        //删除 通过父元素 来删除 子元素
        div.removeChild(i)
    }

    function fn4() {
        //复制节点
        var d=div.cloneNode(true)
        //节点复制的时候吧属性带过去了
        //吧id改了不就行了
        // d.id=""
        d.setAttribute("id","")
        //加到body中
        document.body.appendChild(d)
    }

</script>
<button onclick="fn2()">增加一张图片</button>
<button onclick="fn3()">删除一张图片</button>
<button onclick="fn4()">复制div</button>
</body>
</html>

JS操作表格

DOM 结构中 table 标感的子节点是 tbody
table . rows ：表格中的行的生合
tow . cels ：一行中的列的生合
table insertRow ( i )：在表格中为的位置播入一行
rOw . insertCelg ：在行中为的位置插入一列
table . deleteRow ( i )：删险第i行