常用的JS原生方法

最近做項目用到了js一些常用的原生方法，謹記以下：
#心得#：多擼文檔，總有意外收獲！

1. 常用的JS原生方法：

var bgdiv = window.document.getElementById("div_demo_id"); if (!bgdiv) {bgdiv = window.document.createElement("div");bgdiv.id = "div_demo_id";window.document.getElementsByTagName("BODY")[0].appendChild(bgdiv); } var iWidth = document.documentElement.clientWidth; var iHeight = document.documentElement.clientHeight; if (!height)height = 30; var scrollTop = document.documentElement.scrollTop; if (!scrollTop) {scrollTop = document.body.scrollTop;// IE } bgdiv.className = "div_demo_class"; bgdiv.style.cssText = "position:absolute;height:" + height+ "px;left:" + (iWidth - 200) / 2 + "px;top:"+ ((iHeight - height) / 2 + scrollTop - 72)+ "px;z-index:9999;text-align:center;"; bgdiv.style.display = "block"; bgdiv.style['z-index'] = 9999; //重要！！ (不知道的轉不過來，竟然可以用[]，哈哈哈哈) bgdiv.innerHTML = "<div>Hello Word !</div>"; bgdiv.setAttribute("屬性","值"); bgdiv.getAttribute("屬性");

• document.getElementById 根據Id，獲取元素
• document.createElement 創建元素
• document.getElementsByTagName 根據元素名稱，獲取元素（返回數組）
• appendChild 追加元素
• document.documentElement.clientWidth 獲取寬高
• document.documentElement.clientHeight 獲取寬高
• document.documentElement.scrollTop 滾動條位置
• document.body.scrollTop 滾動條位置
• xxx.className 設置class屬性值
• xxx.innerHTML 插入html代碼
• xxx.style.cssText 設置樣式內容
• xxx.style.display 設置樣式內容

---

2. 獲取元素、查找元素：

• document.querySelector(element); 查找元素，支持class、id等
  （大部分jquery支持的寫法，如“div.mi-body”），本方法僅支持IE8及以上使用。
• getElementsByClassName; 根據class名稱查找，返回元素數組
• getElementsByTagName();
• getElementById();
• getElementsByName();
• xxx.parentNode 獲取上級元素
• xxx.parentNode.removeChild(xxx); //刪除元素

---

3.復制文字

input.select();
document.execCommand(“copy”)

function copyText(text) {var copy_input = window.document.getElementById("copy_input");if (!copy_input) {copy_input = window.document.createElement("input");copy_input.id = "copy_input";window.document.getElementsByTagName("BODY")[0].appendChild(copy_input);}copy_input.style.display = "block";copy_input.value = text;copy_input.select();if (document.execCommand("copy"))layer.msg("復制成功" + text);copy_input.style.display = "none"; }

4.模擬滾動屏幕（到頂部or到底部）

模擬手滑動屏幕效果（可擴展為到頂部or到底部）
高度可以控制，例如0，或dom.offsetHeight。

• 使用jQuery（有動畫）

var height= $(window).height(), scrollTop = Math.max($('#xx-container').scrollTop(), height); $('#xx-container').animate({scrollTop : parseInt(scrollTop + (height * 0.8)) + 'px' }, 'slow');

• 使用JS（無動畫）

說明：js如需要動畫效果，可以將height使用setTimeout分段滾動。

var bgdiv = window.document.getElementById("search-inaccount-content"); if (bgdiv) {bgdiv.scrollBy(0, height); }

5.動態加載圖片、動態加載js…

var oScript = document.createElement("script");oScript.src = fileServer + '/js/stream-v1.js';oScript.onload = oScript.onreadystatechange = function() {if (this.complete || this.readyState == "loaded" || this.readyState == "complete") {//@-操作}};

onload、complete 為普通瀏覽器
onreadystatechange、readyState 為IE瀏覽器事件

var ohd = document.getElementsByTagName('HEAD').item(0),v=new Date().getTime(),ot0 = document.createElement('script'); ot0.src = 'https://www.showdoc.com.cn/static/jquery.min.js?v='+ v; ohd.appendChild(ot0);ohd.appendChild(ot0);

其它說明：

瀏覽器控制臺中，可以使用js進行頁面的數據操作（比如引入jquery，引入js文件，追加元素等）。

---

【備份地址】。

總結

以上是生活随笔為你收集整理的常用的JS原生方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。