javascript笔记9

节点常用属性

DOM节点动态操作

CSS修饰

#box {

    width: 100px;height: 100px;background-color: yellow

}

#box_t {

    width: 100px;height: 100px;background-color: yellow

}

#box_listener {

    width: 100px;height: 100px;background-color: red

}

javascript不支持重载

function sum(a, b)

{

return a+b+100;

}

function sum(a, b)

{

return a+b+200;

}

console.log(sum(10,20));

节点常用属性

<input id="put" type="text" name="in" placeholder="you are a good man"></input>

var jsInput = document.getElementById("put");

var s=jsInput.placeholder;

console.log(s)

父节点、子节点、兄弟节点

DOM节点动态操作

<div id="box">

<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

</div>

var a = document.createElement("p");

a.innerHTML = "5";

a.style.backgroundColor="red";

console.log(a);

var div = document.getElementById("box");

div.appendChild(a);

div.insertBefore(a,div.lastChild);

<div id="box">

<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

</div>

var input = document.createElement("input");

input.setAttribute("type","text");

input.setAttribute("placeholder","good");

document.getElementById("box").appendChild(input);