javascript---dom编程

DOM树 示例图：

一    DOM 节点关系： 
父节点 parentElement
所有子节点 children
第一个子节点 firstElementChild
最后个子节点 lastElementChild
上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling

代码如下：

html代码：

<h1>节点关系查找</h1>

<div id="parent">

<p>你好我是p1</p>

<p id="me">你好我是p2</p>

<p>你好我是p3</p>

<h5>小小标题</h5>

</div>

js代码：

<script>
            // 获取到父节点
            var parent  =  document.getElementById("parent");
            // 获取到所有的子节点
            console.log(parent.children);
            // 第一个子节点
            var first = parent.firstElementChild;
            console.log("第一个子节点",first);
            // 最后一个子节点
            var last  = parent.lastElementChild;
            console.log("最后一个",last);
            // children 子（复数） first第一个 Element元素 Child子
            // last 最后一个
           
            /*
            // 获取me节点
            var me = document.getElementById("me");
            console.log(me);
            // me的父节点
            console.log(me.parentElement);
            // me的上一个兄弟节点
            var pre = me.previousElementSibling;
            console.log(pre);
            // me的下一个兄弟节点
            var next = me.nextElementSibling;
            console.log(next);
            // parent 父 Element元素   parentElement父元素
            // previous之前、上一个 Element 元素   Sibling兄弟 
            // previousElementSibling 上一个兄弟节点
            // next 下一个;Element元素;Sibling兄弟
            // nextElementSibling下一个兄弟关系
            */

二 节点操作

创建节点
document.createElement(tag)

删除节点：
elem.remove()
elem.parentElment.removeChild(elem)

复制节点 ,不带子节点
var elem2 = elem.cloneNode(false)

复制节点，带子节点
var elem3 = elem.cloneNode(true)

插入节点
parent.appendChild(elem) 将elem插入到parent最后面

插入节点
parent.insertBefore(新的节点，相关节点)
把新的节点插入到 相关节点的前面

替换节点
parent.replaceChild(新的节点，被替换的节点)
 

html代码：

        <button type="button" οnclick="createElement()">创建并插入</button>
        <button type="button" οnclick="copyImg()">复制图片</button>
        <button type="button" οnclick="delImg()">删除图片</button>
        <button type="button" οnclick="insertImg()">指定位置</button>

js代码：

function insertImg(){
                var img = document.createElement("img");
                img.setAttribute("src","pic3.png");
                var myp = document.getElementById("myp");
                document.body.insertBefore(img,myp);
            }
            function delImg(){
                var img = document.querySelector("img:last-of-type");
                //img.remove();
                img.parentElement.removeChild(img);
            }
            function createImg(){
                var img = document.createElement("img");
                img.setAttribute("src",'pic2.png');
                document.body.appendChild(img);
            }
            function copyImg(){
                var pic1 = document.getElementById("pic1");
                var img = pic1.cloneNode(false);
                document.body.appendChild(img);
            }

三 表格操作

创建行
row = table.insertRow(index)

创建列
col = row.insertCell(index)

设置列的内容
col.innerText="xxx"

选择第一行
table.firstElementChild.fristElementChild

html 代码如下：

<table border="" cellspacing="" cellpadding="">

            <tr>
                <td>书名</td>
                <td>书名</td>
                <td>书名</td>
            </tr>
            <tr>
                <td>书名</td>
                <td>书名</td>
                <td>书名</td>
            </tr>
            <tr>
                <td>书名</td>
                <td>书名</td>
                <td><button>删除</button></td>
            </tr>

        </table>
        <button type="button" οnclick="add()">增加</button>
        <button type="button" οnclick="del()" >删除</button>
        <button type="button" οnclick="change()">修改</button>

js代码如下

function change(){
                var table=document.getElementsByTagName('table')[0];
                 var row=table.firstElementChild.firstElementChild
                 row.style.backgroundColor='#f30'
                 console.log(row)
            }
            
            function del(){
                var table=document.getElementsByTagName('table')[0];
                table.deleteRow(1)
            }
            function add(){
                var table=document.getElementsByTagName('table')[0];
                
                var row=table.insertRow(2);
                var td1=row.insertCell(0);
                var td2=row.insertCell(1);
                var td3=row.insertCell(2);
                td1.innerText='今天'
                td2.innerText='20.00'
                td3.innerHTML='<button>删除</button>'
            }

四 select 下拉框

创建一个option
var option = new Option(text,value)

插入一个option
select.add(option,before)

html代码：

select id="sel">

<option value="1">a</option>

<option value="2">b</option>

<option value="3">c</option>

</select>

js代码：

("#sel").val('1');//设置value为1的option选项为默认选中
//方法二：
("#sel option[value='1']").prop("sel",true);
//方法三：
("#sel option[value='1']").prop("sel",sel);
 

五 事件的监听

1.DOM0 在html标签中
<h1 οnclick="callMe()">

2.DOM1 实现js与html分离
btn.οnclick=callMe;
btn.onclick = function(){}

3.DOM2 可以添加多个，也可以移除
btn.addEventListener(“click”,callMe)
btn.addEventListener("click",function(){})

html代码：

<h2 οnclick="callMe()">事件监听</h2>
        <button id="btn">点击</button>
        <button id="btn2">随意</button>

js代码
        <script type="text/javascript">
            function callMe(){
                alert('我运气真好')
            }
            var btn=document.getElementById('btn')
            btn.οnclick=callMe
            btn.οnclick=function(){
                alert('很好')
            }
            var btn2=document.getElementById('btn2')
            btn.addEventListener('click',callMe)
            btn.addEventListener('click',function(){
                alert('吃串串')
            }  )

六 js与 
 

1.常用事件

点击 onclick

鼠标经过 onmouseover

鼠标移开 onmouseout

鼠标按钮被按下 onmousedown

2 获取样式 属性

1. var divObj=document.getElementById("test");

2. var objTop=divObj.style.top;

3.获取样式属性值

getComputedStyle()   //全局方法

currentStyle      //ie专有的方法

4.查看滚动条的滚动距离

document.body/documentElement.scrollLeft/scrollTop   

5.浏览器窗口可视大小

window.innerWidth/innerHeight（内容+内边距）              Iwindow.documentElement.clientWidth/clientHeight     

 window.body.clientWidth/clientHeight       

6.查看元素尺寸和位置

查看元素尺寸  dom.offsetWidth, dom.offsetHeight

查看元素位置     dom.offsetLeft, dom.offseTop              

 dom.offsetParent       返回最近的有定位的父级，