JS之DOM（二）
一、DOM节点的操作
1.增加：
(1). document.creatElement('标签名');创建元素节点
(2). document.creatTextNode('文本内容')；创建文本节点
(3). document.creatComment('注释内容'); 创建注释节点
(4). document.DocumentFragment();添加文本碎片
2.插入
(1). dom.appendChild('domName'); 向Dom添加子节点
document.body.append('domName');向body下添加子节点
(2). Parent.insertBefore(a, b);/*insert a before b*/
3.删除
(1). Parent.removeChild('子节点标签名');剪切子节点，并返回
4.替换
(1). Parent.replaceChild(new, origin);用new 来替换orign，且orign返回
二、Element的一些属性
1. dom.innerHTML 返回dom的内容，返回类型为字符串，可读可写本
for(var i = 0; i < 3; i++){
div.innerHTML += '<span>i</span>';
}
2.dom.innerText(火狐不兼容)/dom.textContent(老版本IE不好用)， 注意：影响操作赋值语句，会影响标签，修改覆盖
三、Element的一些方法
1.dom.setAttribute('特证名', '修改后内容')；设置特征（包括自定义的）；
div.setAttribute('id', 'demo');
2.dom.getAttribute('特证名')；获取特征值
注意：ＪＳ改变样式，以改变class为优先选择
利用上述一、二、三的内容可以动态的向html文档添加内容
四、日期对象 Date（）
1.计算机纪元时间：1970.1.1
五、计时器
1、setInterval(执行函数，间隔时间)；每间隔设定时间，执行一次要求的函数
var i = 0;
window.setInterval(function(){
i++;
console.log(i);
console.log(this);// => window,++
},1000 );
特点：(1).耗性能，执行时间有误差不准，（因为放入执行队列后不一定执行）
(2).setInterval()存在返回值
(3). 函数参数部分传入字符串(函数体)也可执行
setInterval('i++;console.log(i)',1000);
2.clearInterval(setInterval的返回值); 停止setInterval函数的执行
var i = 0;
var timer = window.setInterval(function(){
i++;
console.log(i);
if(i == 10){
clearInterval(timer);
}
},1000 );// => 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
setInterval()返回值为该方法第几次定义的数字；
3.setTimeout(function(){},time);//间隔time后执行该函数一次
4.learTimeout()；终止setTimeout
六、DOM基本操作
1.查看滚动条的滚动距离
（1）window.pageXOffset/pageYOffset
横轴和竖轴
IE8及IE8以下不兼容
（2）a. document.body.scrollTop/document.body.scrollLeft
b. document.documentElement.scrollTop/document.documentElement.scrollLeft;
任何一个浏览器a和b两种方法必有一个不能用，无值，所以：两种方法求和即可解决这种问题
（3）封装结局兼容和第二个问题
function getScrollOffset() {
if(window.pageXOffset) {
return {
w: window.pageXOffset,
h: window.pageYOffset
}
}
var dis = {
w: document.body.scrollLeft + document.documentElement.scrollLeft,
h：document.body.scrollTop + document.documentElement.scrollTop;
}
}
2. （1）window.innerWidth/window.innerHight,可视区域宽高，IE8及IE8以下不兼容
（2）标准模式下：document.documentElement.clientWidth/document.documentElement.clientHeight
(3)怪异模式下：document.body.clientWidth/document.body.clientHeight
（怪异模式下，老版本语法规则兼容，方法：将上方<!DOCTYPE html>去掉）
document.compatMode 在控制台查看是否为怪异模式,返回'BackCompat',则为怪异模式，返回'CSS1Compat',则为非怪异模式
(4)可视区封装域宽高，解决兼容和不同模式下问题
function setViewportOffset() {
if(window.innerWidth){
return {
w: window.innerWidth,
h: window.innerHeight
}
}
if(document.compatMode == 'BackCompat'){
return{
w: document.body.clientWidth,
h: document.body.clientHeight
}
}else {
return {
w: document.documentElement.clientwidth,
h: ocument.documentElement.clientHeight
}
}
}
3.查看元素尺寸
（1）elementNode.getBoundingClientRect();
返回的left和top，为左上角坐标，right和bottom为右下角坐标，相对浏览器；
height和width在老版本并未实现
返回结果为一个对象且非实时
（2）封装，解决老版本不兼容问题
Element.prototype.getElementOffset = function(){
var objData = this.getBoundingClientRect();
if(objData.width) {
return {
w: objData.width,
h: objData.height
}
}else{
return {
w: objData.right - objData.left,
h: objData.top - objData.bottom
}
}
}
（3）elementNode.offsetWidth/offsetHeight/offsetLeft/offsetTop/,查看该元素宽高
dom.offsetLeft/offsetTop 对于无定位父级的元素，返回相对整个文档的坐标，对于有定位父级的元素，返回相对于最近定位父级元素的坐标
offsetParent 返回最近的定位的父级，body调用返回null
（4）封装获得返回元素右下角相对于浏览器原点的坐标
Element.prototype.getScrollOffset = function () {
if(!this.offsetParent){
return{
w: this.offsetWidth,
h: this.offsetHeigth
}
}
var width = this.offsetWidth,
height = this.offsetHeight,
tar = this;
while(tar.offsetParent != null){
tar = tar.offsetParent;
width += this.offsetWidth;
height += this.offsetHeight;
}
return {
w: width + tar.offsetWidth,
h: height + tar.offsetHeight
}
}
4.让滚动条滚动
1.scrollTo(x,y);滚动到x，y的距离，每次都相对于浏览器原点
2.scroll（x，y）;和 1方法同
3.scrollBy();滚动到x，y的位置，每次都相对于当前滚动条的位置，之前数据累加
JS之DOM（二）的更多相关文章
- 继续JS之DOM对象二
前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...
- JS之DOM对象二
前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...
- 前端之JavaScript：JS之DOM对象二
继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...
- 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）
[JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
- python学习笔记十三 JS，Dom（进阶篇）
JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...
- 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- js的dom对象（带实例超详细全解）
js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...
- js的dom测试及实例代码
js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...
- js的dom操作（整理）（转）
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
随机推荐
- JavaScript高级程序设计之EventUtil
简单的通用事件方法 var EventUtil = { getEvent: function (e) { return e || window.event; }, getTarget: functio ...
- App创意项目助跑计划
APP创意项目助跑计划 该计划旨在帮助同学们将各种脑中稀奇古怪的想法借助互联网/移动互联网 相关的技术变成真实的项目. 谱写你的故事,从此刻开始! 我们帮助你提高编程(Java.C++.Objecti ...
- golang没有条件表达式?:
详见The Go Programming Language Specification中Expressions一章中未提及此表达式, 故其不支持. 再强调一次, GO不支持条件表达式 conditio ...
- ZLG_GUI配置与函数介绍
http://www.docin.com/p-825479457.html ZLG_GUI配置与函数介绍
- verilog语法之memory存储器
命名规则:reg[n-1:0] 存储器名[m-1:0] 说明:这是m个n位的存储器,该存储器的地址范围是0-(m-1) 举例:reg[3:0] memo[255:0] 说明:这是256个4位存储器,该 ...
- iOS 进阶 第二十天(0520)
0520 -KVO 如下图所示:(面试可能会问到,你就按照下面的说) 注意:NSString类型的成员变量用set方法时,要记得用copy,至于为什么,知道这么用就行了.如下图:
- C++中的抽象类及纯虚函数的实现与否
1.含有纯虚函数的叫抽象类 2.抽象类(一般是基类)中的纯虚函数无论函数体实现与否,都没有关系,系统会自动忽略 3.继承自抽象类的子类,必须要实现父类的纯虚函数才可以实例化对象 4.抽象类不允许实例化 ...
- c++中-1是true呢还是false呢
今天想看一下引用c++中的,然后看到网上有问c++中-1是true or false呢?用vc6.0是了一下,是true.vc6.0中应该是非0的都是true,0为false.java我也试了一下,i ...
- “我爱淘”冲刺阶段Scrum站立会议8
完成任务: 今天最大的成功就是解决了昨天的问题,可以将xml文件的内容解析出来显示到软件中. 计划任务: 可以通过webservice将数据库中的内容解析出来,通过查询可以得到想要的内容. 遇到问题: ...
- NEST.net Client For Elasticsearch简单应用
NEST.net Client For Elasticsearch简单应用 由于最近的一个项目中的搜索部分要用到 Elasticsearch 来实现搜索功能,苦于英文差及该方面的系统性资料不好找,在实 ...