JavaScript基础（二） DOM

本是古典何须时尚 2022-04-13 09:22 220阅读 0赞

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>DOM</title>  
</head>  
<body name="cc">  
<div id="div" name="cc">  
    <ul type="square" id="myul">  
        <li name="cc">苹果</li>  
        <li>香蕉</li>  
        <li>葡萄</li>  
        <li>西瓜</li>  
        <li>橘子</li>  
    </ul>  
</div>  
<div>  
    <ol type="A">  
        <li>苹果</li>  
        <li>香蕉</li>  
        <li>葡萄</li>  
        <li>西瓜</li>  
        <li>橘子</li>  
    </ol>  
</div>  
<button οnclick="text1()">获取元素</button>  
<button οnclick="text2()">获取元素2</button>  
<button οnclick="test3(this)">给第一个div下面的列表添加新的列表值</button>  
<script>  
//    节点属性   节点.方法  
//nodeName：节点名字（节点名/\#text）。  
//nodeValue：节点的值（nodeValue/null）。  
//nodeType ：节点类型  
//document.documentElement : 取得<html>元素节点  
//ownerDocument：节点所属文档  
//firstChild,lastChild：第1个/最后一个节点。  
//childNodes：所有子节点列表  
//previousSibling：前一个兄弟节点，没有则为null。  
//nextSibling：后一个兄弟节点，没有则为null。  
//hasChildNodes()：是否有子节点，返回true/false  
//attributes：元素节点的属性对象集合。  
//appendChild(node) ：添加元素节点到childNodes中  
//removechild(node)：从childNodes中删除节点  
//replaceChild(newNode,oldNode)：替换节点  
//insertBefore(newNode,refNode):在refNode前插入节点

function text1() \{  
//        获取html元素节点  
        var ohtml = document.documentElement;  
//        元素节点内的结构  
        console.log(ohtml)  
//        nodeName获得的元素节点名称都为大写  
        console.log(ohtml.nodeName)  //HTML  
        console.log(ohtml.nodeValue)    //null  
        console.log(ohtml.nodeType)     //1  
//        firstChild第一个子节点  
        console.log(ohtml.firstChild)   //head元素节点  
//        lastChild最后一个子节点  
        console.log(ohtml.lastChild)     //body元素节点  
//        document.body可以直接获得body元素  
        console.log(document.body)  
//        childNodes获得子节点列表  
        console.log(ohtml.childNodes)       //NodeList(3)?\[head, text, body\]  
//        一个按钮的情况下  
        //\#text DIV  \#text  DIV  \#text  BUTTON  \#text  SCRIPT  \#text  
//        body元素下面只有div、div、button、script但是它们之间的换行也算一个文本节点，文本节点名称（\#text）  
        for(var i=0; i<document.body.childNodes.length; i++)\{  
            console.log(document.body.childNodes\[i\].nodeName);  
        \}  
//        previousSibling前一个兄弟节点，因为两个div节点之间有换行，所以输出的是 \#text节点  
        console.log(document.body.childNodes\[3\].previousSibling)    //\#text  
        console.log(document.body.childNodes\[3\].previousSibling.previousSibling)    //第一个div  
//        nextSibling后一个兄弟节点  
        console.log(document.body.childNodes\[3\].previousSibling.nextSibling)        //第二个div  
//        attributes：元素节点的属性对象集合  
        console.log(document.body.childNodes\[1\].childNodes\[1\].attributes)   //0:type 1:id  
    \}  
//访问元素节点

//getElementsByTagName(name)  
//返回指定元素的名称的元素节点集合

//getElementByTagName(\*)能得到所有元素节点  
//getElementsByName(name)  
//按name属性值获取元素节点集合。

//getElementById(id)  
//通过元素ID取得节点  
//兼容所有浏览器，推荐使用。

//处理元素属性  
//元素节点.attributes取得元素属性集合  
//getNamedItem(name)-返回指定名称的属性节点  
//removeNamedItem(name)-删除指定名称的属性节点  
//setNamedItem(node)-添加属性节点  
//item(pos)-返回指定位置的节点  
//length属性 - 属性节点数量  
//getAtrribute(name)-取得指定名称属性的值。  
//setAttribute(name,value)-设置属性的名值对  
//removeAttribute(name)-删除属性

//      innerHTML设置元素的内容,不适用文本节点，Table和select不支持  
//      nodeValue只使用文本节点,可用于修改属性值

function text2() \{  
//        getElementsByTagName通过元素节点名称返回元素节点集合  
        var lis = document.getElementsByTagName('li')  
        console.log(lis)    //HTMLCollection(10)?\[li, li, li, li, li, li, li, li, li, li, cc: li\]  
//        getElementsByName通过name属性值获得元素节点集合  
        var cc = document.getElementsByName('cc')  
        console.log(cc)   //NodeList(3)?\[body, div.div, li\]  
//        通过元素ID获得节点  
        var odiv = document.getElementById('div')  
        console.log(odiv)  
//      innerHTML设置元素的内容,不适用文本节点，Table和select不支持  
        lis\[0\].innerHTML="修改"  
//      nodeValue只使用文本节点,可用于修改属性值  
        lis\[1\].firstChild.nodeValue = '继续修改...'

//下面几种方法是通过元素节点的属性集合处理元素属性（一般不推荐使用）  
//    getNamedItem(name)通过属性名在属性集合中找到属性  
        console.log(odiv.attributes.getNamedItem('name'))  
//        找到属性后通过nodeValue修改属性值  
        odiv.attributes.getNamedItem('name').nodeValue='bb'  
//    removeNamedItem(name)通过属性名删除属性节点  
        odiv.attributes.removeNamedItem('name')  
//    createAttribute（string\[\] name）创建一个属性节点class  
    var cal = document.createAttribute('class')  
//    nodeValue修改属性节点的值  
    cal.nodeValue='cd'  
//    setNamedItem(node)-添加属性节点  
    odiv.attributes.setNamedItem(cal)  
//    item(index)-返回指定位置的节点与odiv.attributes\[0\]效果相同  
    console.log(odiv.attributes.item(0))

//    下面几种方法是通过元素节点直接处理元素属性  
//    setAttribute（name,value）该方法可以直接通过元素节点添加、修改元素的属性  
    odiv.setAttribute('value','lkj')  
//    getAttribute(name)通过属性名直接获得元素节点属性值  
    console.log(odiv.getAttribute('class'))     //cd  
//    removeAttribute(name)通过属性名直接删除元素节点的属性  
    odiv.removeAttribute('value')  
\}

//createElement(name)-创建元素节点  
//createTextNode(text)-创建文本节点  
//createAttribute(name)-创建属性节点

function test3(obj) \{  
        var myul = document.getElementById('myul')  
//        createElement(name)创建元素节点  
        var newli = document.createElement('li')  
//        newli.innerHTML='haha'与var txt = document.createTextNode('新节点');newli.appendChild(txt)效果相同  
        newli.innerHTML='haha'  
//        appendChild（node） 添加子节点(添加到已有子节点的最后)  
        myul.appendChild(newli)  
        newli.setAttribute('name','newll')  
    \}  
</script>  
</body>  
</html>

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>DOM的table操作</title>  
</head>  
<body>  
<button οnclick="table()">实现九九乘法表</button>  
<div id="div"></div>  
<script>  
//    DOM提供了专门操作table的方法  
//    rows:表格的所有<tr>节点集合  
//    deleteRow(pos):删除指定位置的<tr>节点。  
//    insertRow(pos):在指定位置插入<tr>节点。  
//    cells:<tr>节点中的所有<td>集合  
//    deleteCell(pos):删除指定位置上的<td>节点  
//    insertCell(pos):在指定位置插入一个<td>节点

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>BOM</title>  
</head>  
<body>  
<div id="div1">0</div>  
<button οnclick="test1()">开始</button>  
<script>  
    /\*  
    每隔一定时间执行一次代码  
     var id=window.setTimeout("执行代码",毫秒数);  
     window.clearTimeout(id)  
    每隔一定时间循环执行代码  
     var id=window.setInterval("执行代码",毫秒数);  
     window.clearInterval(id);  
    1 2 4 8 16 32 64  
     \*/  
    function test1() \{  
        var div1 = document.getElementById('div1');

//        for(;;)  
        div1.innerHTML = parseInt(div1.innerHTML)+1;

if(parseInt(div1.innerHTML)<100)\{  
            setInterval("test1()", 1000);  
        \}  
    \}  
</script>  
</body>  
</html>