DOM
2018-12-12 本文已影响0人
憧憬001
一、对象基础（补充）
<script type="text/javascript">
//1.什么是对象(Object) - 和Python中的对象一样，有对象属性和对象方法。
//2.创建对象
/* a.创建对象字面量
* 对象字面量: {属性名1:属性值1, 属性名2:属性值1}
* 注意：当属性值是普通值我们叫这个属性为对象属性；当属性值是函数这个属性就是对象方法
*/
p1 = {
name:'小李',
age:10,
eat:function(){
console.log('吃饭!')
}
}
p2 = {
name:'小明',
age:18,
eat:function(){
console.log('吃饭!')
}
}
/* b.通过构造方法创建对象
* 声明构造方法（类似python声明类）
* - 声明一个函数，使用函数名来作为类名，在函数中通过this关键字来添加对象属性和对象方法
* - 构造方法的函数名，首字母大写
* - this类似python中的self
* 通过构造方法创建对象
* - 对象 = new 构造方法()
*/
function Person(name1='张三', age1=18, sex1='男'){
//添加对象属性
this.name = name1
this.age = age1
this.sex = sex1
//添加对象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
//返回对象
return this
}
//创建Person的对象
p3 = new Person()
p4 = new Person('小明')
//使用对象属性和方法
console.log(p3, p4, p3===p4, p3.age, p4.name)
p4.eat('苹果')
//调用函数，获取返回值
win1 = Person()
console.log(win1)
win1.alert('我是window')
// c.函数中this关键字
/* 当调用函数的时候前面加关键字new,就是这个函数当成构造函数创建对象，函数中的this就是当前对象;
* 直接调用函数的时候，函数中的this是window对象
*/
//3.使用对象属性（获取属性值）
/*
* a. 对象.属性 - p5.name
* b. 对象[属性名]
*/
var t = 'age'
p5 = new Person('小花', 20, '女')
console.log(p5.name)
console.log(p5['name'], p5[t])
p5.eat('面条')
//4.修改对象属性的值
/* 属性存在的时候是修改，不存在的时候就是添加
* 对象.属性 = 值
* 对象[属性名] = 值
*/
//修改属性值
p5.name = '小红'
console.log(p5)
p5['age'] = 30
console.log(p5)
//添加属性
p5.num = '100222'
p5['num2'] = '110222'
console.log(p5)
//给对象添加属性只作用于一个对象,不影响其他对象
console.log(p4)
//构造方法名(类名).prototype.属性 = 值 --- 给指定构造方法创建的所有的对象都添加指定的属性
Person.prototype.aaa = '123'
p6 = new Person()
p6.aaa = 'abc'
console.log(p6.aaa)
console.log(p5.aaa)
//给String类型添加方法
String.prototype.ytIndex = function(x){
return this[x]
}
str1 = new String('abcdef')
console.log(str1.ytIndex(0))
console.log('hello'.ytIndex(3))
//练习：用一个数组保存多个学生对象，要求学生对象中有姓名，年龄和成绩。最后所有学生按成绩进行排序
function Student(name, age, score){
this.name = name;
this.age = age;
this.score = score;
return this;
}
students = [new Student('小明', 18, 90), new Student('小红', 20, 78), new Student('小花', 19, 98)];
//sort方法排序后，原数组会改变，也会产生新的数组
newStudents = students.sort(function(a,b){
return a.score - b.score;
});
console.log(newStudents, students)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
二、DOM获取节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1" class="c1">我是段落1</p>
<a href="" id="a1">百度一下</a>
<a href="" class="c1">刷新</a>
<input type="text" name="username" value="" />
<input type="password" name="username" value="" />
</body>
</html>
<!--
1.什么是DOM(文档对象模型)
DOM是document object mode的缩写
DOM模型就是一个树结构，里面是由各种节点组成
2.document对象 - js写好的一个对象,代码的是网页内容结构
通过document对象可以拿到网页中所有内容对应的节点
3.获取节点(在js中获取网页中的标签)
-->
<script type="text/javascript">
//============节点操作=============
//1.直接获取节点
//a.通过标签的id值来获取指定的标签
/* document.getElementById(id值) - 返回节点对象
* 如果html中同样的id对应的标签有多个，只能取一个。所有一般在使用id的时候id要唯一
*/
var pNode = document.getElementById('p1')
console.log(pNode)
//b.通过标签名来获取指定的标签
/* document.getElementsByTagName(标签名) - 返回的是一个数组对象，数组中是节点
*/
var aNodeArray = document.getElementsByTagName('a')
for(x in aNodeArray){
// 拿到aNodeArray对象中的所有属性,这儿除了a标签以外还有length，item等其他非标签对象
var aNode = aNodeArray[x]
// 只对标签进行操作
if(typeof(aNode) == 'object'){
console.log(aNode, '是标签！')
}
}
//c.通过类名来获取指定的标签
/* document.getElementsByClassName(类名) - 获取所有class属性值是指定的值的标签,返回的是一个数组对象
*/
var c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
//d.通过name属性的值来获取指定的标签(了解)
/* document.getElementsByName('username') - 返回一个节点数组对象
*/
console.log(document.getElementsByName('username'))
</script>
三、间接获取节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box1">
box1
<div id="box11">
div11
</div>
<div id="box12">
div12
</div>
<div id="box13">
div13
</div>
</div>
</body>
</html>
<script type="text/javascript">
var box11Node = document.getElementById('box11');
//1.获取父节点
// 子节点.parentElement - 获取子节点对应的父节点
var box1Node = box11Node.parentElement;
var box1Node2 = box11Node.parentNode;
console.log(box1Node, box1Node2);
//2.获取子节点
//a.获取所有的子节点
//父节点.children - 返回一个数组对象
var allChildArray = box1Node.children
console.log(allChildArray)
//父节点.childNodes - 获取父节点下所有的内容（包括子节点和文本）
var allChildArray2 = box1Node.childNodes
console.log(allChildArray2)
//b.获取第一个子节点
//父节点.firstElementChild
var childNode = box1Node.firstElementChild
console.log(childNode)
//c.获取最后一个子节点
var childNode2 = box1Node.lastElementChild
console.log(childNode2)
</script>
四、DOM节点的添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#div2{
width: 200px;
height: 200px;
background-color: lightcyan;
position: absolute;
left: 30px;
}
#div2 #div21{
width: 100px;
height: 100px;
background-color: sandybrown;
}
</style>
</head>
<body>
<button onclick="addDiv()">添加</button>
<p id="p1", class="cp1" style="color: darkseagreen;">我是段落</p>
<div id="div1" style="height: 400px; background-color: lightgoldenrodyellow;">
<div id="div11" style="height: 60px; width: 120px; background-color: yellowgreen;">
</div>
</div>
<div id="div2">
<div id="div21">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var pNode = document.getElementById('p1');
//获取标签内容
var content = pNode.innerHTML;
//修改标签内容
pNode.innerHTML = '我不是段落，哈哈~'
//获取标签样式中的文字颜色
var pColor = pNode.style.color;
//修改标签样式
pNode.style.color = 'salmon'
pNode.style.fontSize = '30px'
console.log(content, pColor)
//1.创建节点
//document.createElement(标签名) - 创建指定标签节点(创建后不会自动添加到浏览器上)
/* a.节点属性：
* 标签节点就是标签对象，可以通过document去网页中获取到，也可以自己创建
* 标签对象中有相应的标签相关的属性，可以通过标签节点获取或者修改这些属性值。
* 例如，a标签节点有：href属性, id属性, className属性, style属性等....
* img标签节点有：src属性,id属性，style属性,alt属性, title属性等....
*
* b.innerHTML和innerText属性
* innerHTML - 双标签的标签内容(包含其他标签)
* innerText - 双标签的标签内容(侧重只有文字)
*/
//创建一个div标签对象
var divNode = document.createElement('div')
divNode.innerText = '我是box1'
//创建一个img标签对象
var imgNode = document.createElement('img')
imgNode.src = 'img/thumb-1.jpg'
//2.添加节点
//a.在指定的标签中的最后添加一个节点
//父节点.appendChild(需要添加的节点)
var div1Node = document.getElementById('div1')
function addDiv(){
var divNode = document.createElement('div')
divNode.innerText = '我是box1'
div1Node.appendChild(divNode)
}
//b.在指定的节点前插入一个节点
//父节点.insertBefore(新节点, 指定节点) --- 在父节点中的指定节点前插入新节点
div1Node.insertBefore(imgNode, div1Node.firstChild)
//3.删除节点
//父节点.removeChild(子节点) - 删除父节点中指定的子节点
div1Node.removeChild(imgNode)
//清空标签（删除所有的子标签）
div1Node.innerHTML = null
//节点.remove() - 将节点从浏览器中删除
//4.拷贝节点
//节点.cloneNode() - 拷贝指定节点，产生新的节点(浅拷贝不会拷贝节点中的子节点)
//节点.cloneNode(true) - 拷贝指定节点，产生新的节点(深拷贝会拷贝节点中的子节点)
var div2Node = document.getElementById('div2');
var newDiv2Node = div2Node.cloneNode(true)
div1Node.appendChild(newDiv2Node)
//5.替换节点
//父节点.replaceChild(新节点, 子节点) - 使用新节点替换父节点中指定的子节点
var imgNode = document.createElement('img')
imgNode.src = 'img/thumb-2.jpg'
div2Node.replaceChild(imgNode, div2Node.firstElementChild)
</script>
五、DOM属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/a1.jpg"/>
<button disabled="disabled">点我啊~</button>
</body>
</html>
<script type="text/javascript">
var imgNode = document.getElementsByTagName('img')[0]
// 1.属性的点语法操作
// 节点.属性 - 获取属性值; 节点.属性 = 新值 - 修改属性的值
console.log(imgNode.src)
imgNode.title = '图片1'
var name = 'src'
//2.通过相应方法对属性进行操作
//a.获取属性
//节点.getAttribute(属性名)
var srcAttr = imgNode.getAttribute(name)
console.log(srcAttr)
//b.给属性赋值
//节点.setAttribute(属性名, 值)
imgNode.setAttribute('title', '帅哥1')
//c.删除属性
//节点.removeAttribute(属性)
var buttonNode = document.getElementsByTagName('button')[0]
//让按钮可以点击
buttonNode.disabled = ''
//添加属性
buttonNode.ytIndex = 100
//删除属性
buttonNode.removeAttribute('ytIndex')
</script>
六、练习-删除广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#hide{
display: none;
}
#ad{
height: 100px;
background-color: lightgoldenrodyellow;
}
#ad img{
width: 100%;
height: 100%;
}
#ad #close{
position: absolute;
top: 10px;
right: 15px;
width: 30px;
height: 30px;
background-color: lightgray;
color: white;
text-align: center;
line-height: 30px;
}
#content{
height: 400px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<!--html-->
<div id="ad">
<img src="img/picture-1.jpg"/>
<div id="close" onclick="close1()" style="cursor: pointer;">
X
</div>
</div>
<div id="content"></div>
<!--js-->
<script type="text/javascript">
// window.location
window.location = 'http://www.baidu.com'
window.location.href = 'http://www.baidu.com'
//产生0~255的随机整数
//parseInt() - 转换成整数
//parseFloat() - 转换成小数
//Math.random() - 产生随机数0~1(小数)
num = parseInt(Math.random()*255)
console.log(num)
function close1(){
var adNode = document.getElementById('ad')
// adNode.parentNode.removeChild(adNode)
// 直接移除指定标签
// adNode.remove()
adNode.addEventListener('click', function(evt){
evt.clientX
evt.clientY
evt.pageX
evt.pageY
evt.cancelBubble = true
})
// window.alert()
//让指定的标签不显示
adNode.style.display = 'none'
}
</script>
</body>
</html>
七、动态添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#top{
margin-left: 60px;
margin-top: 60px;
}
#top div{
width: 200px;
height: 50px;
color: white;
font-size: 20px;
margin-bottom: 2px;
text-align: center;
line-height: 50px;
}
#top div font{
position: absolute;
right: 3px;
/*将光标变成手*/
cursor: pointer;
}
#bottom{
margin-left: 60px;
}
#bottom #text{
display: inline-block;
width: 200px;
height: 50px;
border: none;
outline: none;
/*让光标在中间*/
text-align: center;
border-bottom: 2px solid lightgrey;
font-size: 16px;
}
#bottom #button{
display: inline-block;
width: 100px;
height: 30px;
border: none;
outline: none;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<div id="top">
</div>
<!--添加默认的水果标签-->
<script type="text/javascript">
var fruitArray = ['香蕉', '苹果', '草莓', '火龙果'];
for(index in fruitArray){
fruitName = fruitArray[index];
creatFruitNode(fruitName, 'darkgreen')
}
//==========删除水果=============
function delFruit(){
//在这儿，点击的是哪个标签this就指向谁
this.parentElement.remove()
}
//添加节点
function creatFruitNode(fruitName, color1){
//创建标签
var fruitNode = document.createElement('div')
fruitNode.innerHTML = fruitName;
var fontNode = document.createElement('font');
fontNode.innerText = '×';
//给点击事件绑定驱动程序
fontNode.onclick = delFruit;
fruitNode.appendChild(fontNode);
//设置背景颜色
fruitNode.style.backgroundColor = color1
//添加标签
var topNode = document.getElementById('top')
topNode.appendChild(fruitNode)
}
</script>
<div id="bottom">
<input type="text" name="" id="text" value="" />
<input type="button" name="" id="button" value="确定" onclick="addFruit()"/>
</div>
<script type="text/javascript">
//=========产生随机颜色=============
function randomColor(){
var num1 = parseInt(Math.random()*255);
var num2 = parseInt(Math.random()*255);
var num3 = parseInt(Math.random()*255);
return 'rgb('+num1+','+num2+','+num3+')';
}
//==========添加水果==============
function addFruit(){
//获取输入框中的内容
var inputNode = document.getElementById('text');
var addName = inputNode.value;
if(addName.length == 0){
alert('输入的内容为空！');
return;
}
//清空输入框中的内容
inputNode.value = '';
//创建标签
var fruitNode = document.createElement('div');
fruitNode.innerHTML = addName;
var fontNode = document.createElement('font');
fontNode.innerText = '×';
//给点击事件绑定驱动程序
fontNode.onclick = delFruit;
fruitNode.appendChild(fontNode);
//创建随机颜色
//'rgb(255, 0, 0)'
fruitNode.style.backgroundColor = randomColor();
var topNode = document.getElementById('top');
topNode.insertBefore(fruitNode, topNode.firstChild);
}
</script>
</body>
</html>
