1.获取某个dom里面的内容
function getContent (strSelector) { var text = document.querySelector(strSelector).innerHTML; console.log('1.' + strSelector + '里面的内容是：' + text); } getContent('h1');
2.获取某个dom的某个属性的属性值：
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的高度
function getHeight(strSelector) { var height = document.querySelector(strSelector).offsetHeight; console.log('3.' + strSelector + '元素的高度为:' + height); } getHeight('header');
4.获取css background里面的图片链接地址
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.在某个标签后插入某个dom
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.删除有某个类名的dom
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标签跳转
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获取属性，禁用按钮，插入元素
<!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判断两个元素是否重叠
<!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);
}