获取标签节点
获取属性节点
获取文本节点
行间样式表的读写
内部样式表与外部样式表的读写
自由飞翔的div
获取标签节点
<div id="idDiv"><div>
var jsDiv = document.getElementById("idDiv");
console.log(typeof(jsDiv));
console.log(idDiv);
<div class="classDiv"><div>
<div class="classDiv"><div>var jsDivs = document.getElementsByClassName("classDiv");
console.log(jsDivs);
四种获取节点的方式：
var jsDiv = document.getElementById("idDiv");//console.log(typeof(jsDiv));
//console.log(idDiv);
var jsDivs = document.getElementsByClassName("classDiv");
//console.log(jsDivs);
var input = document.getElementsByName("inputText");
//console.log(input[0]);
var jsAllDivs = document.getElementsByTagName("div")
<input type="text" id="in" placeholder="yuhongxue">
var jsInput = document.getElementById("in");
console.log(jsInput.placeholder);
function func(){
jsInput.placeholder="hello world";//修改内容
}
func();
console.log(jsInput);
var jsInput = document.getElementById("in");
console.log(jsInput.getAttribute("other"));
function func(){
jsInput.setAttribute("other","good")
jsInput.removeAttribute("other");//删除属性节点 jsInput.removeAttribute("placeholder");
jsInput.setAttribute("index","index"); //增加属性节点
}
func();
console.log(jsInput);
获取文本节点
<div id="value">value</div>
var value = document.getElementById("value");
console.log(value.innerHTML);
console.log(value.innerText);
value.innerHTML="good";
console.log(value);
行间样式表的读写
<div id="value" style="width: 100px;height: 200px;background: red">value</div>
var jsdiv = document.getElementById("value");
jsdiv.style.backgroundColor="yellow";
内部样式表与外部样式表的读写
内部样式表
<div id="value" style="width: 100px;height: 200px;background: red"></div>
var jsDiv = document.getElementById("value");
var c = jsDiv.style.backgroundColor;
console.log(c);
外部样式表
获取样式写法：
var c = window.getComputedStyle(jsDiv,null).backgroundColor;
设置样式写法：
jsDiv.style.backgroundColor="black";
自由飞翔的div
<head>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top:0px;
}
</style>
</head>
<body style="height: 1000px;position:relative;">
<div id="box"></div>
<button onclick="fly()" style="position:absolute;left: 200px;top: 200px">fly</button>
fly var div = document.getElementById("box");
function fly(){
setInterval(function(){
var a = parseInt(window.getComputedStyle(div,null).left);
div.style.left=a+10+"px";
var b = parseInt(window.getComputedStyle(div,null).top);
div.style.top=b+10+"px";
},100)
}
</body>
网友评论