JS基础-DOM

作者: 壹枕星河 | 来源:发表于2019-02-28 15:10 被阅读10次

DOM（Document Object Model 文档对象模型）

DOM定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系。

获取DOM节点

1、 document.getElementById(id名)

var ul = document.getElementById("ul");

2、getElementsByTagName(标签名)
得到的是一个集合（不止一个，是一堆）

var aLi = document.getElementsByTagName("li");

3、getElementsByName( ) 通过Name值获取元素，返回值是集合，通常用来获取有name的input的值；
注：1不是所有的标签都有name值；
2低版本的浏览器会有兼容问题；

var input = document.getElementsByName("input");

4、 children属性，获得DOM元素的所有子元素；返回值是集合

var aLi = ul.children;
        console.log(aLi);

5、parentNode属性，获得DOM元素的父级元素

console.log(ul.parentNode);

6、getElementsByClassName(class名称)
但是：IE8以下不能用

var input = document.getElementsByName("input");
        console.log(input);

7、ES5选择器：
document.querySelector () > 一旦匹配成功一个元素，就不往后匹配了

console.log(document.querySelector("#ul"));

document.querySelectorAll () >>>> 强大到超乎想象;匹配到所有满足的元素, 支持IE8+

console.log(document.querySelectorAll(".li"));

属性获取和操作

1、getAttribute( )获取元素的属性值，他是节点的方法！所以前缀必须是节点！
document.getElementById( ID值 ).getAttribute( )

什么是元素属性呢？ class就是元素属性，写在标签内的所有东西都是标签属性，比如link的href比如img的src....都是元素属性。
元素自带的属性可以直接用 . 语法获取，但是自定义属性需要 getAttribute() 和 setAttribute( ) 方法

var div = document.querySelector("div");
        console.log(div);
        console.log(div.className);
        div.setAttribute("date-ddd", 123);
        console.log(div.getAttribute("date-ddd"));

2、setAttribute( )设置元素的属性。同上；
有些小小的兼容性问题，低版本IE不兼容；
设置的属性永远都是字符串类型

div.setAttribute("date-ddd", 123);

3、removeAttribute( )删除属性；同上；
兼容性问题同上；

div. removeAttribute("date-ddd", 123);

DOM元素类型(元素、文本和属性)

 nodeObj.nodeName // 节点名称  
/*
    元素节点：标签名（大写）

    属性节点：属性名称

    文本节点：#text
*/
nodeObj.nodeType // 1 ==> 元素节点  2 ==> 属性节点  3 ==> 文本节点

console.log(div.childNodes[0].nodeType);
console.log(div.childNodes[0].nodeName);

操作DOM

创建节点
var oDiv = document.createElement("div");

var h1 = document.createElement("h1");
h1.innerHTML = 2334;
div.appendChild(h1);

克隆节点
clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示深客隆，复制该节点下的所有子节点；false表示浅克隆，只复制该节点

var hh = h1.cloneNode(true);
        div.appendChild(hh);

插入节点
parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾
parentNode.insertBefore(newNode, targetNode); //将newNode插入targetNode之前

div.appendChild(h1);
div.insertBefore(hhh,span);

替换节点
parentNode.replaceChild(newNode, targetNode); //使用newNode替换targetNode

div.replaceChild(span,hhh);

移除节点
parentNode.removeChild(childNode); // 移除目标节点
node.parentNode.removeChild(node); //在不清楚父节点的情况下使用
childNode.remove() //IE不支持

div.removeChild(hh);   
h1.parentNode.removeChild(h1);
span.remove

文档碎片

<script>
            var ul = document.querySelector("ul");
            var cache = document.createDocumentFragment();
            for(var i = 0; i < 20; i++){
                var li = document.createElement("li");
                li.className = "box";
                li.innerHTML = i;
                cache.appendChild(li);
                
            }
            ul.appendChild(cache);
        </script>

node节点（更详细的获取（设置）页面中所有的内容）

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
元素是节点的别称，节点包含元素当然节点还有好多细化的种类
根节点：root>>>>HTML没有父节点；
节点操作（通过父子系关系）
childNodes 获取当前元素的所有子节点；
nodeType 节点种类，返回值是数字；
nodeValue 获取（文字）节点的文本内容；
nodeName 返回node节点名称（#text，注释，标签....）；

nodetype.png

<ul>
        qwwertrt
        <li class="li" id="li" date-index="1"><a>hhbb</a></li>
        <li>zxxc</li>
    </ul>
    <script>
        var ul = document.querySelector("ul");
        console.log(ul.childNodes);//查找获取当前元素的所有子节点
        console.log(ul.childNodes[0].nodeValue);//文本有nodevalue
        console.log(ul.childNodes[1].nodeValue);//null 元素节点的nodevalue为空
        console.log(ul.childNodes[1].innerHTML);//<a>hhbb</a> innerHTML会将标签解析
        console.log(ul.childNodes[1].innerText);//hhbb 只输出文本
        ul.childNodes[1].innerHTML = "<a>123</a>";
        ul.childNodes[1].innerText = "<a>345</a>";//<a>345</a> 不会解析标签
        console.log(ul.childNodes[1].outerHTML);//<li class="li" id="li" date-index="1">&lt;a&gt;345&lt;/a&gt;</li>
        console.log(ul.childNodes[1].attributes);//获取所有，该节点的属性信息
        console.log(ul.childNodes[1].attributes[0]);//返回属性节点个数
        console.log(ul.childNodes[1].attributes["id"]);//返回属性为 id 的节点
    </script>

innerHTML会将标签解析；
nodeValue不会进行解析，会将标签名转译成字符串，直接输出.

attributes属性

 var oBox = document.getElementById('box');

        console.log(oBox.attributes)//获取所有，该节点的属性信息；
        console.log(oBox.attributes.length);//返回属性节点个数
        console.log(oBox.attributes[0]);//返回第一个属性节点
        console.log(oBox.attributes[0].nodeType);//2，属性
        console.log(oBox.attributes[0].nodeValue);//属性值
        console.log(oBox.attributes['id']);                              //返回属性为 id 的节点
        console.log(oBox.attributes.getNamedItem('id'));// 获取 id 的节点；

        attributes属性 一般只用作获取，设置使用setAttribute()

 childNodes 获取当前元素节点的所有子节点

firstChild 获取当前元素节点的第一个子节点

lastChild 获取当前元素节点的最后一个子节点

previousSibling 获取当前节点的前一个同级节点

nextSibling 获取当前节点的后一个同级节点
       ****以上五中方法都包含空白文本节点

firstElementChild   获取当前元素节点的第一个元素子节点

lastElementChild  获取当前元素节点的最后一个元素子节点

ownerDocument 获取该节点的文档根节点，相当与 document

parentNode 获取当前节点的父元素

<ul>
            rgdtfre
            <li class="li" id="li" data-index="1"><a>dgrsdc</a></li>
            <li>dgrsdc</li>
        </ul>
        <script>
            var ul = document.querySelector("ul");
            
            console.log(ul.childNodes);// 获取当前元素节点的所有子节点

            console.log(ul.firstChild);// 获取当前元素节点的第一个子节点

            console.log(ul.lastChild);// 获取当前元素节点的最后一个子节点

            console.log(ul.firstElementChild);//  获取当前元素节点的第一个元素子节点


            console.log(ul.lastElementChild);// 获取当前元素节点的最后一个元素子节点


            console.log(ul.lastElementChild.previousSibling); 获取当前元素节点的最后一个元素子节点的前一个同级节点

            console.log(ul.lastElementChild.previousElementSibling);获取当前元素节点的最后一个元素子节点的后一个同级节点
        </script>

++DOM尺寸和位置

DOM尺寸

DOM尺寸.png

获取非行内样式（兼容问题）

 function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
      if(obj.currentStyle){   //针对ie获取非行间样式
            return obj.currentStyle[attr];
      }else{
            return getComputedStyle(obj,false)[attr];   //针对非ie
      };
};

位置坐标

位置坐标.png
offsetParent 这个属性的返回值是它根据谁定位的，如果它的所有父元素都没有定位，那么返回body.
案例：
1.位置移动动画

<body>
        <div style="width: 200px;height: 200px;background: red;position: absolute;">box</div>
        <script>
            var div = document.querySelector("div");
            div.onclick = function(){
                var timer = setInterval(function(){
                    div.style.left = div.offsetLeft + 9 + "px";
                    if(div.offsetLeft >= 500){
                        clearInterval(timer);
                        div.style.left = "500px";
                    }
                },30);
            }
        </script>
    </body>

2.全选和反选

<body>
        全选：<input type="checkbox" id="checkAll">
        <div id="content">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
        </div>
        <script>
            var checkAll = document.querySelector("#checkAll");
            var aCheck = document.querySelector("#content").children;
            var n = 0;
            checkAll.onchange = function(){
                //console.log(checkAll.checked);
                n = checkAll.checked ? aCheck.length : 0;
                
                for(var i = 0; i < aCheck.length; i++){
                    aCheck[i].checked = checkAll.checked;
                }
            }
            
            for(var j = 0; j < aCheck.length; j++){
                aCheck[j].onchange = function(){
                    
                    /* if(this.checked) n++;
                    else n--; */
                    this.checked ? n++ : n--;
                    /* if(n === aCheck.length) checkAll.checked = true;
                    else checkAll.checked = false; */
                    
                    checkAll.checked = n === aCheck.length;
                }
            }
            
        </script>
    </body>

3.tab选项卡

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0 ;padding: 0;}
            .tab{width: 500px;height: 300px;margin: 20px auto 0;}
            .tab ul{border: 1px solid #ccc;height: 32px;}
            .tab li{width: 33%;height: 30px;list-style: none;float: left; line-height: 30px;text-align: center;font-size: 18px;}
            .tab li.ac{background: #ccc;}
            .tab img{width: 500px;height: 269px;display: none;}
            .tab img.ac{display: inline-block;}
        </style>
        <script src="jquery-1.11.3.js"></script>
    </head>
    <body>
        <div id="tab" class="tab">
            <ul>
                <li class="ac">item1</li>
                <li>item2</li>
                <li>item3</li>
            </ul>
            <div id="content">
                <img class="ac" src="http://5b0988e595225.cdn.sohucs.com/images/20170729/8dec04ede4894f978ab2b59ff1144699.jpeg" />
                <img src="http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180726/1a5259dd8b1a42f9b435fa3ea9043cc9.jpeg" />
                <img src="http://5b0988e595225.cdn.sohucs.com/images/20180401/90674fc5bf9a4ae7bd4d8c424a09c917.jpeg" />
            </div>
        </div>
        <script>
        var aLi = document.querySelector("ul").children;
        var aImg = document.querySelector("#content").children;
        
        for(var i = 0; i < aLi.length; i++){
            aLi[i].index = i;
            aLi[i].onclick = function(){
                //先全部清空,再给自己加上ac
                for(var j = 0; j < aLi.length; j++){
                    aLi[j].className = "";
                    aImg[j].className = "";
                }
                this.className = "ac";
                
                aImg[this.index].className = "ac";
            }
        }
        </script>
    </body>
</html>

JS基础-DOM

DOM（Document Object Model 文档对象模型）

获取DOM节点

属性获取和操作

DOM元素类型(元素、文本和属性)

操作DOM

文档碎片

node节点（更详细的获取（设置）页面中所有的内容）

attributes属性

++DOM尺寸和位置

位置坐标

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JS笔记