前端开发js DOM概述

web前端开发学习网站 web前端和后台开发谁待遇好 web前端开发前景与分析
DOM概述
Dhtml= html+css+js
html、XHTML、dhtml、XML(可扩展标记语言)
Dhtml对象模型:
            1. window:当前浏览器打开的窗口;
            2. document:当前正在打开的html文档;
            3. navigator:封装了浏览器软件的版本信息以及部分设置
            4. history:封装了当前窗口成功浏览过的历史信息
            5. location:当前窗口地址栏
            6. screen:当前显示器
            7. event:事件对象
DOM和 Bom
Bom:浏览器对象模型,用来访问和操作浏览器窗口
DOM:文档对象模型,有w3c组织定义和操作的标准;可以对网页中任意对
象做修改;
核心dom:操作所有结构文档(html xml)的通用api
html dom:网页中一切对象(元素,文字,属性)在内存中父子相连成一颗DOM树
XML DOM
DOM操作:增加节点、删除节点、修改节点、查找节点
DOM树:文档中每个元素、属性、文本、注释都是被看做一个节点-node-所
有节点对象的父类型;
当网页被加载进内存时浏览器,浏览器会为网页创建一个document对象
所有的节点都是document的子节点;
Document对象封装了对网页中所有子节点的增加、删除、查找
整个文档就是一个文档节点 document node
每个html标签就是一个元素节点 element node
包含在html中的文本就是文本节点text node
每个html属性就是一个属性节点 attribute node
注释属于注释节点comment node
Node类型定义了三个公共属性
nodeName:用来获取元素节点的大写标签名称,如果是文本节点,
返回#text
nodeValue:用来获取文本节点的文本内容
元素节点 返回的是null
文本节点返回的才是 文本内容
nodeType:用来判断到底是什么节点
元素节点返回1
文本节点返回3
.childNodes:获取当前节点的所有子节点,类数组对象;
节点树: 元素树
.childNodes 获取当前元素点的所有子节点 .children
.firstChild 获取当前元素的第一个子节点 .firstElementChild
.lastChild 获取当前元素的最后一个子节点 .lastElementChild
.parentNode 获取当前节点的父节点 .parentElement
.previousSibling 获取当前节点的前一个同级节点 .previousElementSibling
.nextSibling 获取当前节点的后一个同级节点 .nextElementSibling
元素树:仅有元素组成的树
获取节点方法
格式:元素.事件
点击事件 .onclick on后面是事件 on代表监听
双击事件 .ondblclick
滑入事件 .onmouseover
滑出事件 .onmouseout
移动 .onmousemove
获得焦点 .onfocus
失去焦点 .onblur
鼠标按下 .onmousedown
鼠标抬起 .onmouseup
2017年6月27日星期二
创建删除节点:
  1. 创建一个空元素对象
var newelemt = document.createElement(“标签名”);
2、设置必要属性
newlemt.属性名 = “值”
newlemt.innerHTML = “文本”
3、把元素对象挂载带指定父元素下
parent.appendChild(newelemt);
插入:parent.insertBefore(新元素,旧元素);
删除:parent.removeChild(要删除的元素);
替换:parent.replaceChild(新元素,旧元素);
查找:console.log(xiaobai[“xiao”]);
console.log(xiaobai.xiao) ;
排他思想:
定时器:不需要用户触发可自动执行的一种机制
  1. 周期性定时器:按照固定时间间隔反复执行相同操作
  1. 定义任务函数
  2. 创建变量保存定时器
  3. 启动定时器
  4. 停止定时器clearInterval(timer)
  1. 一次性定时器:等待一定的时间执行一次,执行完毕之后自动退
出。
innerHTML:起始标签与结束标签之间的原文
想在<head></head>里面写<script>
必须在加<script>
window.onload=function(){}
</ script>
document.body.appendChild():在body增加一个子节点
var xiaobai={
“name”:”xiao”,
“sex”:”男”,
“age”:17
}
console.log(xiaobai);
for(var key in xiaobai ){
// in前面的参数叫做json的属性名 in后面的叫做json的对象
console.log(xiaobai[key]);
}
This:在普通函数和定时器里面this永远指的是window。
在事件函数里this指的是事件对象
(function(){
console.log(this);
}());
setInterval(aa,1000);//无限循环 // setTimeout()//循环一次
function aa(){
alert(1);
}
//如果用setInterval,就用clear+Interval() 清除
document.querySelector()//html 5 获取元素
轮播图的宽 高 和 本身图片的宽高 一致
Function startMove(obj,json,fn)//obj:操作对象 json:最终结果
前端可以开发公众号吗 前端开发从入门到放弃 在前端开发中最得意的项目
» 本文来自:前端开发者 » 《前端开发js DOM概述》
» 本文链接地址:https://www.rokub.com/38138.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!