第十章：DOM

<div class="wrap">
    <ul id="ul">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
    </ul>
</div>
<script>
    var ul = document.getElementById('ul');
    var lis=document.querySelectorAll('li');
    console.log(ul.nodeType);//1:元素节点 2：属性节点 3文本节点
    console.log(ul.nodeName);//元素标签名
    console.log(ul.nodeValue);//始终为null
    console.log(lis);
    console.log(Object.getOwnPropertyDescriptor(window,'lis'));
    console.log(lis.item(0));
    console.log(lis.constructor); //查看构造函数
    console.log(Array.from(lis))//转化为数组

</script>

<div class="wrap">
    <ul id="ul">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
    </ul>
</div>
<script>
    var ul=document.querySelector('ul');
    var li=document.querySelector('li');
    var lis=document.querySelectorAll('li');

    /*节点之间关系*/
    console.log(ul.firstChild);//子集节点
    console.log(ul.firstElementChild);//子集第一个元素节点
    console.log(ul.lastElementChild);//子集最后一个元素节点

    console.log(li.parentNode);//直接父元素
    console.log('下一个兄弟元素节点',li.nextElementSibling);//下一个兄弟元素节点
    console.log('上一个兄弟元素节点',li.previousElementSibling);//上一个兄弟元素节点
    console.log(ul.childNodes);//ie9+ ie8会有文本节点


    /*\
    * 父.appendChild(子) 父级元素内部最下面添加子元素
    * 父.insertBefore(要插入的元素，子元素)
    * 父.replaceChild(新元素,被替换掉的子元素);//
    *
    * */
    var myli=document.createElement('li');
    var p=document.createElement('p')
    p.innerHTML='dasda';
    myli.setAttribute('name','li');
    myli.innerText=33;

    myli1=myli;//如果不赋值 下面两句会操作同一个节点
    ul.appendChild(myli);
    ul.insertBefore(myli,li);
    ul.replaceChild(p,li);//

    /*节点复制*/
    var clone=ul.cloneNode(); //克隆其自身不包含子元素
    var clone1=ul.cloneNode(true);//深复制 会克隆他的子元素
    console.log(clone);
    console.log(clone1);

<div class="wrap">
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
    </ul>
</div>
<script>
    /*
     * js中通过Document类型表示文档
     * 在浏览器中document对象是HTMLDocument的一个实例 表示整个页面
     * document 是window对象的一个属性
     *
     *
     * */

    console.log(document.constructor) //ƒ HTMLDocument() { [native code] }


    console.log(window.document);
    console.log(window.document.nodeName);
    console.log(window.document.nodeValue);
    console.log(window.document.nodeType);
    /*下面两个输出一致指向html*/
    console.log(document.childNodes[1]);//
    console.log(document.documentElement);
    console.log(document.body);
    console.log(document.doctype);//各浏览器支持程度不一样
    console.log(document.doctype === document.childNodes[0]);//true
    console.log(document.title);//文档标题 可赋值
    console.log(document.URL);//
    console.log(document.domain);//域名
    console.log(document.URL === location.href);//true

    /*查找元素*/
    var nodes = document.getElementsByTagName('*');
    console.log(nodes)

   /*
   setAttribute()
   getAttribute()
   removeAttribute()
    * */
    var li=document.querySelector('li');
    li.setAttribute('name','hxq');
    li.setAttribute('www','hxq');
    console.log(li.getAttribute('name'));
    li.removeAttribute('name')

 

转载于:https://www.cnblogs.com/aqigogogo/p/7693009.html