javascripts-常用API

//基本DOM操作
var link = document.querySelector('a');
link.href = 'www.baidu.com';
link.textContent = 'lne is cool.';
//如果有多個a元素，那會選擇第一個，如果要選擇多個的話。需要querySelectorAll('a');
var linka = document.getElementById('#id');
var section = document.getElementsByTagName('section');
//以上兩種是舊方法

var para = document.createElement('p');
para.textContent = 'lne is so cool.';
section.appendChild(para);
var text = document.createTextNode('just do it!');
para.appendChild(text);
//記住，創建的是一個對象，只需要在對象中添加子對象

para.appendChild(link);
para.cloneNode(link);
//上面兩種方法第一種是把他移動，原先位置會沒有，第二種是複製一份放到 下面

para.removeChild(link);
link.parentNode.removeChild(link);
//自己不能幹掉自己，必須調用父親來將孩子刪除，同樣傳入的也是對象

//操作樣式
para.style.color = 'white';
para.style.backgroundColor = 'blue';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center'
//在js中，使用的是駝峯命名法
para.setAttribute('class', 'highlight');
//也可以在內部嵌入css，然後將該元素的類名改變


//js服務器端獲取數據
//XML方式  一種較爲舊的方式，兼容性好
            var request = new XMLHttpRequest();
            request.open('GET', url);
            request.responseType = 'text';//設置請求類型
            request.onload = function() {
                poemDisplay.textContent = request.response;
            };
            request.send();

//fetch方式 新方式
            fetch(url).then(function(response) {
                //then會自動獲取前面所得的結果，將其作爲參數，例如在此是response，因此在then裏面可以隨意取任何名字，
                response.text().then(function(text) {
                    poemDisplay.textContent = text;
                });
            });
            /*
            或者這種表示方法：
                fetch(url).then(function(response) {
                    return response.text()
                }).then(function(text) {
                    poemDisplay.textContent = text;
                    });
            */