dom基礎

時間  2019-12-17
標籤 dom 基礎 欄目 HTML 简体版
原文   原文鏈接

1.獲取某個dom裏面的內容javascript

function getContent (strSelector) {
        var text = document.querySelector(strSelector).innerHTML;
        console.log('1.' + strSelector + '裏面的內容是：' + text);
    }
    getContent('h1');

2.獲取某個dom的某個屬性的屬性值：css

    function getAttr(strSelector, strAttr) {
        var dom = document.querySelector(strSelector);
        var value = dom && dom.getAttribute(strAttr);
        if (value) {
            console.log('2.類名爲' + strSelector + '元素的accesskey屬性值爲:' + value);
        }
    }
    getAttr('.active', 'accesskey');

3.獲取某個dom的高度html

    function getHeight(strSelector) {
        var height = document.querySelector(strSelector).offsetHeight;
        console.log('3.' + strSelector + '元素的高度爲:' + height);
    }
    getHeight('header');

4.獲取css background裏面的圖片連接地址java

     function getBack(strSelector) {
         var domElement = document.querySelector(strSelector);
         var strUrlBackImg = window.getComputedStyle(domElement).backgroundImage;
         // currentStyle
         if (/url/.test(strUrlBackImg)) {

             strUrlBackImg = strUrlBackImg.split("url")[1].replace(/\"/g,'').replace(/\(/g,'').replace(/\)/g,'');
             console.log(strUrlBackImg);
             console.log('4.' + strSelector + '背景圖片的地址是：' + strUrlBackImg);
         }
     }
     getBack('h1');

5.在某個標籤後插入某個domnode

    function insertHtml(strSelector) {
        var navList = document.querySelector(strSelector);
        if (navList) {
            navList.insertAdjacentHTML('beforeEnd', '<a href accesskey="4">導航4</a>');
        }
        console.log('6.在' + strSelector + '標籤後插入<a href accesskey="4">導航4</a>以後爲：');
        console.log(navList);
    }
    insertHtml('nav');

6.刪除有某個類名的domweb

    function delDom(strSelector) {
        var dom = document.querySelectorAll(strSelector);
        for (var i=0; i<dom.length; i++) {
            dom[i].parentNode.removeChild(dom[i]);
            console.log('7.有' + strSelector + '類名的' + '這個dom被刪除了');
        }
    }
    delDom('.logo');

7.禁止頁面上全部的a標籤跳轉canvas

    function preventLink() {
        document.body.addEventListener('click', function (event) {
            var elTarget = event.target;
            if (/^a$/i.test(elTarget.tagName)) {
                event.preventDefault();
            }
        });
    }    
    preventLink();

8.dom獲取圖片寬高，禁用菜單，插入元素瀏覽器

<!doctype html>
<html>
<head>
<style type="text/css">
    * {
      margin: 0;
      padding: 0; 
    }
    img {
        border: 0;
        display: block;
        background-color: red;
        position: relative;
    }
/*    .word {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }*/
    .word {
        width: 100px;
        height: 100px;
        position: relative;
        margin-top: -100px;
        line-height: 100px;
        text-align: center;
    }
</style>
<body>

<script type="text/javascript">
(function () {
    "use strict";
    var console = window.console;

    var img = new Image();
    var bodyElement = document.querySelector('body');

    img.setAttribute('width', 100);
    img.setAttribute('height', 100);
    img.onload = function() {
        console.log('1.圖片的寬爲：' + img.width + '圖片的高爲：' + img.height);
    };
    img.src = 'http://qidian.qpic.cn/qidian_common/349573/4ff3d03bc13bb37b2da095acc4164483/0';

    bodyElement.insertBefore(img,bodyElement.firstElementChild);

    img.setAttribute('alt', '3.閱文集團');

    img.addEventListener('click',function() {
        img.style.backgroundColor = "green";
        img.style.borderRadius = "50%";
    });

    img.oncontextmenu = function(){ 
        console.log('5.個人右鍵菜單被禁用了');
        return false;
    };

    var imgList = document.querySelector('img > img');
    var imgList2 = document.querySelector('img ~ img');
    if(imgList || imgList2) {
        console.log('6.有其餘圖片和插入的這個元素是兄弟關係');
    } else {
        console.log('6.沒有其餘圖片和插入的這個元素是兄弟關係');
    }

    var text = document.createElement('span');
    text.innerHTML = '圖片';
    text.style.position = 'absolute';
    var dom = document.createElement('div');
    dom.appendChild(text);
    img.after(dom);


    text.style.marginTop = -1 * (img.offsetHeight / 2) - text.offsetHeight / 2 + 'px';
    text.style.marginLeft = 1 * (img.offsetWidth / 2) - text.offsetWidth / 2 + 'px';


})();
</script>
</body>
</html>

9.dom獲取屬性，禁用按鈕，插入元素app

<!doctype html>
<html>
<head>
<body>
<p><button id="btn">按鈕</button></p>
<script type="text/javascript">
(function () {
    "use strict";
    var console = window.console;

    var btn = document.getElementById('btn');
    console.log('1.獲取的dom對象爲' + btn);

    var type = btn.type;
    console.log('2.btn的type類型爲' + type);

    btn.addEventListener('click', function(){
        // btn.setAttribute('disabled', 'disabled'); 或者
        btn.setAttribute('disabled', true);
        console.log('3.按鈕被禁用了');
    });

    var AttrValue = window.getComputedStyle(btn).whiteSpace;
    console.log('4.按鈕的white-space屬性值爲' + AttrValue);

    var dom = document.createElement('input');
    dom.setAttribute('type', 'button');
    var btn2 = btn.parentNode;
    btn2.insertBefore(dom, btn.nextSibling);

     console.log('7.新按鈕的white-space的屬性值爲' + window.getComputedStyle(dom).whiteSpace);


     // onclick和addEventListener的區別
     /*
        onclick方法IE8如下用，IE9以上用onclick和addEventListener
        可是jq已經封裝好了兼容全部瀏覽器的方法：dom.on('click',function(){});
        
        demo:
        btn.onclick = function () { alert('1'); };
        btn.onclick = function () { alert('2'); };
        //output: alert('2');

        btn.addEventListener('click', function(){
             alert('1');
        });
        btn.addEventListener('click', function(){
            alert('2');
        });
        //output: alert('1'); alert('2');

     */

})();
</script>
</body>
</html>

10.dom判斷兩個元素是否重疊dom

<!doctype html>
<html>
<head>
<style type="text/css">
    .test-box {
        width: 100px;
        height: 100px;
        border: 20px solid pink ;
        background: yellow;
    }
    body {
        position: relative;
    }
</style>
</head>
<body>
刷新看看效果
<div id="box" class="test-box"></div>
</body>
<script type="text/javascript">
(function () {
    "use strict";
    var console = window.console;

    var box = document.getElementById('box');
    var boxHeight = box.offsetHeight,
        boxWidth = box.offsetWidth;
    console.log('1.#box的寬(包括border）爲:' + boxWidth + ',個人高爲:' + boxHeight);


    var position = box.getBoundingClientRect();
    var top = position.top,
        left = position.left;
    console.log('2.#box距離瀏覽器窗口左上角的水平距離爲:' + left + '垂直距離爲:' + top);

    var boxClone = box.cloneNode(true);
    boxClone.removeAttribute('id');
    document.body.appendChild(boxClone);

    box.style.boxSizing = 'border-box';
    boxHeight = box.offsetHeight;
    boxWidth = box.offsetWidth;
    console.log('1.#box的寬(包括border）爲:' + boxWidth + ',個人高爲:' + boxHeight);



    var cloneWidth = Math.random()*(200 - 100) + 100;
    var cloneHeight = Math.random()*(120 - 60) + 60;

    boxClone.style.width = cloneWidth + 'px';
    boxClone.style.height = cloneHeight + 'px';
    console.log('3.克隆div的寬帶爲：' + cloneWidth);
    console.log('3.克隆div的高度爲：' + cloneHeight);

    var boxCloneWidth = boxClone.offsetWidth,
        boxCloneHeight = boxClone.offsetHeight;

    boxClone.style.position = 'absolute';
    boxClone.style.marginTop = cloneWidth + 'px';
    boxClone.style.marginLeft = cloneHeight + 'px';


    var positionClone = boxClone.getBoundingClientRect();
    var topClone = positionClone.top,
        leftClone = positionClone.left;
    var boxCloneWidth = boxClone.offsetWidth,
        boxCloneHeight = boxClone.offsetHeight;


    if (leftClone - left > boxWidth || left - leftClone > boxCloneWidth || top - topClone > boxCloneHeight || topClone - top > boxHeight) {
        boxClone.innerHTML = '沒重疊';
        console.log('沒重疊');
    } else {
        boxClone.innerHTML = '重疊';
        console.log('重疊');
    }
})();
</script>
</html>

 11. 去掉頁面的註釋代碼

<body>
<!--這家公司沒有年終獎，不要來-->
<!---->
<!-- -->
呵呵呵呵呵
</body>
<script type="text/javascript">
    "use strict";
    var console = window.console; 

    var node = document.body.childNodes;
    for (var i=0; i<node.length; i++) {
        if (node[i].nodeName == '#comment') {
            node[i].parentNode.removeChild(node[i]);
        }
    }

    document.body.insertAdjacentHTML('afterbegin','<!--這家公司沒有年終獎，不要來-->');

    document.body.appendChild(document.createComment('這家公司沒有年終獎，不要來2'));

</script>
</body>

12. 判斷瀏覽器是否支持webp格式

function checkWebp() {
    // 若瀏覽器支持則能返回類型參數的dataurl：data:image/webp,若瀏覽器不支持，默認返回的是data:image/png
    return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/png') == 0);
    }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程