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;
                    });
            */