您的位置：首页 > Web前端 > JavaScript

JS学习笔记(02)——节点对象

2015-10-17 01:35 615 查看

window对象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
<script>
// window.alert('haha');
// window.confirm('确定吗？');

console.log(window.navigator.cookieEnabled);

console.log(window.location);
// window.location.href = 'http://www.google.fr';

</script>
</head>
<body>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
<script>
console.log(window.history);
console.log(window.screen.width);
console.log(window.screen.height);
alert(window.document);
</script>
</head>
<body>
<input type="button" value="前进" onclick="javascript:window.history.forward()">
<input type="button" value="后退" onclick="javascript:window.history.back()">

</body>
</html>


加不加var

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
<script>
window.str = 'union';

function t1(){
// var str = 'china';

function t2(){
// var str = 'Japan';
str = 'Japan'; //不加var，赋值过程，加var，声明一个局部变量
alert(str);
}
t2();
}

t1();
</script>
</head>
<body>
</body>
</html>


JS读取改变对象属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
}

#test1{
background: green;
}

#test2{
background: red;
}

</style>
<script>
function ch(){
var div = document.getElementById('test1');
div.id = 'test2';
}

</script>
</head>
<body>
<h1>特效是什么</h1>
<div id="test1" onclick="ch();"></div>

</body>
</html>


找对象



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>
<h1>关键是找对象</h1>
<div id = "test1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class = "test2">class test2</div>
<input type="text" name="username" id = "" value= "poly">
</body>
<script >
//用id来查询，返回值是对象
console.log(document.getElementById('test1'));

//用标签来查询，返回值是对象的集合,即使只找到一个对象，也包装成集合(数组)返回
ps = document.getElementsByTagName('p');
ps[1].style.background = 'green';

//对于扁担元素可以用name来查询,返回值是对象集合
alert(document.getElementsByName('username')[0].value);
document.getElementsByName('username')[0].value = 'lucy';

//按照类名查找，返回对象集合
document.getElementsByClassName('test2')[0].style.background = 'gray';

//找子节点
alert(document.getElementById('test1').childNodes.length);  //空白符，换行都看成一个节点
alert(document.getElementById('test1').children.length); //children非标准属性，但兼容很好，他不包含空白节点

document.getElementsByTagName('p')[2].parentNode.style.border='1px solid';

</script>
</html>


注意：

1.在
<div class="main">
中操作class属性用
divobj.classname
。

2.如果css属性带有横线，如border-top-style，则把横线去除，并把横线后面的首字母大写。

3.放在标签里的style的css属性才能被找到。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.test1{
background: green;
}
.test2{
background: red;
}

</style>
</head>
<body>
<div class="test1" onclick='t();' style="width: 300px;height: 300px;border-bottom: 1px solid;">
点击div，使其背景色红绿交替
宽高增加5px
下边框增粗1px；
</div>
</body>
<script>
function t(){
var div = document.getElementsByTagName('div')[0];
if(div.className.indexOf('test1') >= 0 ){
div.className = 'test2';
} else {
div.className = 'test1';
}

div.style.width = parseInt(div.style.width) + 5 +'px';
div.style.height = parseInt(div.style.height) + 5 +'px';
div.style.borderBottomWidth = parseInt(div.style.borderBottomWidth) + 1 +'px' ;
}
</script>
</html>


通过函数读取当前的style

此种方法可以取得
<style></style>
中的css属性。

window.getComputedStyle(obj, 伪元素)

参数说明：

第一个参数为要获取计算后的样式的目标元素

第二个参数为期望的伪元素，如’after’等，一般设为null

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
border-bottom: 1px solid black;
}
.test1{
background: green;
}
.test2{
background: red;
}

</style>
</head>
<body>
<div class="test1" onclick="t(); ">
点击div，使其背景色红绿交替
宽高增加5px
下边框增粗1px；
</div>
</body>
<script>
function getStyle(obj , attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj , null)[attr]; // 这两个对象是只读，要想改还是得通过obj.style
}

function t(){
var div = document.getElementsByTagName('div')[0];
if(div.className.indexOf('test1') >= 0 ){
div.className = 'test2';
} else {
div.className = 'test1';
}

// alert(getStyle(div, 'width'));

// return;
div.style.width = parseInt(getStyle(div, 'width')) + 5 +'px';
div.style.height = parseInt(getStyle(div, 'height')) + 5 +'px';
div.style.borderBottomWidth = parseInt(getStyle(div, 'borderBottomWidth')) + 1 +'px' ;
}
</script>
</html>


删除对象

步骤：

1.找到对象

2.找到他的父对象parentObj

3.parentOb.removechild（子对象）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function del(){   //可以在此处放script，因为一般都在页面加载完之后才会去点
var lis = document.getElementsByTagName('li');
var lastli = lis[lis.length-1];
lastli.parentNode.removeChild(lastli);
}
</script>
</head>
<body>
<input type="button" value="删除最后一个li" onclick = "del();">
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</body>
</html>


创建对象

步骤：

1.创建对象

2.找到父对象parent.Obj

3.parentObj.addChild(对象)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function add(){
var li = document.createElement('li');
var txt = document.createTextNode('冬');
li.appendChild(txt); // 把文本节点写进li节点里
document.getElementsByTagName('ul')[0].appendChild(li);
}
</script>
</head>
<body>
<h1>创建节点</h1>
<input type="button" value="增加" onclick = "add();">
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
</ul>
</body>
</html>


暴力操作节点

innerHTML：代表节点内的内容，能读能写

不是一个w3c规定的标准，但各浏览器支持的很好。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>
<h1>创建节点</h1>
<input type="button" value="添加春夏秋" onclick = "add3();">
<input type="button" value="添加冬" onclick = "add2();">
<ul>
</ul>
<script>
function add3(){
var ul = document.getElementsByTagName('ul')[0];
ul.innerHTML = '<li>春</li><li>夏</li><li>秋</li>';
}

function add2(){
var ul = document.getElementsByTagName('ul')[0];
// alert(ul.innerHTML);
ul.innerHTML += '<li>冬</li>';
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航