js基础升级3

1.使用document.createDocumentFragment()创建文档片段，相当于一个暂存文档节点的仓库，并不进行渲染。如果进行循环添加节点的时候，为了避免重复渲染，可以使用fragment进行存储，然后统一渲染。

var ul = document.getElementsByClassName("mylist")[0];
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;
    fragment.appendChild(li);
}
ul.appendChild(fragment);

2、访问属性节点
//创建属性

var atr=document.createAttribute("class");

//设置属性值，拼接属性值

atr.nodeValue=container.getAttribute("class")+" democlass";

//设置属性 也可以用container.className="xxx"直接进行赋值

container.setAttributeNode(atr);

//获取属性 或者直接用 元素.属性的方法 比如container.classList就获取class的集合

console.log(container.getAttribute("class"))


var img=document.getElementsByTagName("img")[0]
img.setAttribute("src","https:xxxx.jpg")
//或者用下面的
// img.src="https://xxxx.jpg"

删除属性

removeAttribute(name)

3.自定义属性，需要添加data-前缀这样提供语义信息，支持firefox 和chrome。使用时，需要使用dataset进行获取。

<div id="container"  data-test="lala">
  eeemmmm
</div>

console.log("dataset----"+container.dataset.test)
container.dataset.test="lalala"
console.log("dataset----"+container.dataset.test)

4.对于script的加载监听的问题，用于监听加载是否完成。

ie不支持window.function(){}的形式。但是script有一个readyState属性，如果有这个属性，那么就使用window.onreadystatechange=function(){}

5.JSONP
利用

6.css元素选择器
//这是获取到第一个元素

var li = document.querySelector(".mylist li")
li.style.backgroundColor="#ff0000"

// 这是获取到所有的元素

var liList=document.querySelectorAll(".mylist li")
for (var i = 0; i < liList.length; i++) {
     liList[i].style.backgroundColor="#ffff00"
}

//可以同时获取两个条件的节点

var liList=document.querySelectorAll(".mylist li,.mylist2 li")

7.js是用事件驱动实现的。当网页对象发生特定事件后，浏览器就会自动生成event，然后事件对象顺着DOM节点传递。

 bt_c.onclick = function (ev1) {
 //在ie的环境下，是window.event   这样进行兼容
  var e = ev1 || window.event
 console.log(e.srcElement ? e.srcElement : e.target)
}

注册事件

element.addEventListener(String type,Function listener,boolean useCapture)
type:注册事件名，不带on
listener:回调事件
useCapture:ture为捕获阶段触发，false为冒泡阶段。

type的值：
click:
mouseover:鼠标移进去
mouseout:

对于ie浏览器，使用attachEvent(typeName,function)
这里的typeName需要加on

销毁事件

element.removeEventListener(type,function)

对于ie浏览器

element.detachEvent(type,function)

注意：
一定要保持下面的三部分一致。

event对象属性

altKey: false
bubbles: true    //是否为冒泡类型
button: 0
buttons: 0
cancelBubble: false   //是否取消冒泡
cancelable: true  //是否取消冒泡
clientX: 101
clientY: 243
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 101
layerY: 339
metaKey: false
movementX: 0
movementY: 0
offsetX: 95
offsetY: 38
pageX: 101
pageY: 339
path: (5) [button#bt_c, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 111
screenY: 380
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: button#bt_c
target: button#bt_c    //返回当前节点
timeStamp: 613.9050000019779
toElement: button#bt_c
type: "click"    //事件的名称
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
which: 1
x: 101
y: 243

event对象的方法：

preventDefault():通知浏览器不要执行与事件关联的默认操作
stopPropagation():终止事件在传播过程中的捕获，目标处理或冒泡阶段进一步传播。

//禁止超链接默认的跳转行为。

document.getElementById('a1').onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName !== 'A') {
    return;
}
if( typeof e.preventDefault === 'function') {
    e.preventDefault();
    e.stopPropagation();
} else {
    e.returnValue = false;
    e.cancelBubble = true;
}
};