原生js的基础方法等三，dom的操作

var element=document.getElementById("header");
element.innerHTML="新标题";

改变 HTML 属性
<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

改变 HTML 样式
document.getElementById(id).style.property=新样式
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 

onload 与 onunload

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie

onchange <input type="text" id="fname" onchange="upperCase()">

addEventListener() 方法用于向指定元素添加事件句柄。向同一个元素中添加多个事件句柄,addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

向 Window 对象添加事件句柄
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

document.getElementById("myDiv").addEventListener("click", myFunction, true);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

创建新的 HTML 元素 (节点) - appendChild()，insertBefore(),removeChild()

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

var myNodeList = document.querySelectorAll("p"); y = myNodeList[1];

[round()](https://www.runoob.com/try/try.php?filename=tryjsref_round)
如何使用 round()。

[random()](https://www.runoob.com/try/try.php?filename=tryjsref_random)
如何使用 random() 来返回 0 到 1 之间的随机数。

[max()](https://www.runoob.com/try/try.php?filename=tryjsref_max)
如何使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

[min()](https://www.runoob.com/try/try.php?filename=tryjsref_min)
如何使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

className

var div = document.createElement("div");
div.className = "div1";

2.节点关系

<div id="div1">
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
父节点：parentNode
  var child2 = document.getElementById("div2");
   var parent = child2.parentNode;

  子节点：childNodes
    var allChilds = parent.childNodes;

兄弟节点：nextSibling，previousSibling
 var child3 = document.getElementById("div3");
    var next = child3.nextSibling;
    var previous = child3.previousSibling;
    console.log(next); // IE下返回div4，其他返回text
    console.log(previous)  // IE下返回div2，其他返回text

第一个或最后一个子节点：firstChild、lastChild
var child3 = document.getElementById("div3");
    var parent = child3.parentNode;
    var first = parent.firstChild; // IE是div2，其他是text
    var last = parent.lastChild; // IE是div4，其他是text

3.节点操作

appendChild()
var returnNode = someNode.appendChild(someNode.firstChild); // 返回第一个节点
    console.log(returnNode === someNode.firstChild); // false
    console.log(returnNode === someNode.lastChild); // true

insetBefore()

元素选择

  <div id="div1">
        <p id="div2" class="one" name="nameone">2</p>
        <div id="div3">3</div>
        <div id="div4" name="div2">4</div>
    </div>
querySelector、querySelectorAll(IE8及以上)
var special = document.querySelectorAll( "p.warning, p.note" );
var el = document.querySelector( "#main, #basic, #exclamation" );

属性操作

  var div2 = document.getElementById("div2");
    div2.setAttribute("class", "new_class");
    div2.setAttribute("id", "new_id");
getAttribute()
html5里有一个data-*去设置获取元素的自定义属性值。
<div id="div1" data-aa="11">
利用div1.dataset可以获得一个DOMStringMap，包含了元素的所有data-*。
使用div1.dataset.aa就可以获取11的值。
同样，通过设置div1.dataset.bb = "22"就可以设置一个自定义属性值。
在不兼容的浏览器里，就使用getAttribute和setAttribute

    var div1 = document.getElementById("div1");
    var a = null;
    if (div1.dataset) {
        a = div1.dataset.aa;
        div1.dataset.bb = "222";
    } else {
        a = div1.getAttribute("data-aa");
        div1.setAttribute("data-bb", "2222");
    }
    console.log(a);

阻止冒泡

 var div2 = document.getElementById("div2");
    if (div2.addEventListener) {
        div2.addEventListener("click", function(e) {
            e.preventDefault(); // 阻止默认事件
            e.stopPropagation(); // 阻止冒泡
            console.log(e.target.innerHTML);
        }, false);
    } else {
        div2.attachEvent("onclick", function() {
            var e = window.event;
            e.returnValue = false; // 阻止默认事件
            e.cancelBubble = true; // 阻止冒泡
            console.log(e.srcElement.innerHTML);
        });
    }