/ 节点的nodeType属性可以显示这个节点具体的类型。
// nodeType值
// 节点类型
// 1,元素节点，例如<p>和<div>
// 3,文字节点
// 8,注释节点
// 9,document节点
// 10,DTD节点
// 访问元素节点的常用方法
// document.getElementById() 通过id得到元素 IE6
// document.getElementsByTagName() 通过标签名得到元素 IE6
// document.getElementsByclassName() 通过类名得到元素数组 IE9
// document.queryselector() 通过选择器得到元素 iE9已逐渐IE8部分兼容、
// document.querySelectorAll() 通过选择器得到元素数组 IE9完全兼容
// getElementByld
// document.getElementByld() 功能是通过id得到元素节点
// HTML代码:
// <div id="box">我是一个盒子</div><p id="para">我是一个段落</p>
// 参数就是元素节点的id，注意不要写#号
// JS代码:
// var box = document.getElementById('box');var para = document.getElementById('para');
// 延迟运行
// 在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点
// 可以使用window.onload = function()事件，使页面加载完毕后，再执行指定的代码
// getElementsByTagName()
// getElementsByTagName()方法的功能是通过标签名得到节点数组
// HTML代码:
// <p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p>
// JS代码:
// var ps = document.getElementsByTagName('p');
// getElementsByClassName()
// getElementsByClassName()方法的功能是通过类名得到节点数组
// HTML代码:
// <div class="spec">我是盒子</div><div>我是盒子</div>
// <div class="spec">我是盒子</div>
// 注意不要写.号
// <div class="spec">我是盒子</div>
// JS代码:
// var spec_divs = document.getElementsByclassName('spec')
// querySelector()
// querySelector()方法的功能是通过选择器得到元素
// HTML代码:
// <div id="box1">
// <p>我是段落</p>
// <p class="spec">我是段落</p><p>我是段落</p>
// </div>
// 选择器
// JS代码:
// var the_p = document.querySelector( ' #box1 .spec ' );
// 注意事项
// querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素
// querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，如:nth-child()、:[src^='dog']等CSS3选择器形式都支持良好
// querySelectorAll()
// querySelectorAll()方法的功能是通过选择器得到元素数组
// 即使页面上只有一个符合选择器的节点，也将得到长度为1的数组
//var lis_inlist1 = document.querySelectorAll('#list1 li ' );
// 节点的关系
// 子节点 childNodes
// 父节点 parentNode
// 第一个子节点 firstchild
// 最后一个子节点 lastchild
// 前一个兄弟节点 previoussibling
// 后一个兄弟节点 nextsibling
//注意:文本节点也属于节点
// DOM中，文本节点也属于节点，在使用节点的关系时一定要注意
// 在标准的W3C规范中，空白文本节点也应该算作节点，但是在IE8及以前的浏览器中会有一定的兼容问题，它们不把空文本节点当做节点
// 排除文本节点的干扰
// 从IE9开始支持一些“只考虑元素节点”的属性
// 关系 考虑所有节点 只考虑元素节点
// 子节点 childNodes children
// 父节点 parentNode 同
// 第一个子节点 firstchild firstElementchild
// 最后一个子节点 lastchild lastElementchild
// 前一个兄弟节点 previoussibling previousElementsibling
// 后一个兄弟节点 nextSibling nextElementsibling
// <body>
// <div id="box">
// <p>我是段落</p>
// <p>我是段落</p>
// <p>我是段落</p>
// <p id="fpara">我是段落fpara</p>
// 我是文本
// <!-- 我是注释 -->
// <p id="para">
// 我是段落para
// <span>1</span>
// <span>2</span>
// <span>3</span>
// </p>
// <p>我是段落</p>
// <p>我是段落</p>
// <p>我是段落</p>
// </div>
//
// <script>
// var box = document.getElementById('box');
// var para = document.getElementById('para');
// var fpara = document.getElementById('fpara');
// 封装一个函数，这个函数可以返回元素的所有子元素节点（兼容到IE6），类似children的功能
// function getChildren(node) {
// 结果数组
// var children = [];
// 遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1
// 如果是1，就推入结果数组
// for (var i = 0; i < node.childNodes.length; i++) {
// if (node.childNodes[i].nodeType == 1) {
// children.push(node.childNodes[i]);
// }
// }
// return children;
// }
// console.log(getChildren(box));
// console.log(getChildren(para));
// 封装一个函数，这个函数可以返回元素的前一个元素兄弟节点（兼容到IE6），类似previousElementSibling的功能
// function getElementPrevSibling(node) {
// var o = node;
// 使用while语句
// while (o.previousSibling != null) {
// if (o.previousSibling.nodeType == 1) {
// 结束循环，找到了
// return o.previousSibling;
// }
// 让o成为它的前一个节点，就有点“递归”的感觉
// o = o.previousSibling;
// }
// return null;
// }
// console.log(getElementPrevSibling(para));
// console.log(getElementPrevSibling(fpara));
// 封装第三个函数，这个函数可以返回元素的所有元素兄弟节点
// function getAllElementSibling(node) {
// 前面的元素兄弟节点
// var prevs = [];
// 后面的元素兄弟节点
// var nexts = [];
// var o = node;
// 遍历node的前面的节点
// while(o.previousSibling != null) {
// if(o.previousSibling.nodeType == 1){
// prevs.unshift(o.previousSibling);
// }
// o = o.previousSibling;
// }
// o = node;
// 遍历node的后面的节点
// while(o.nextSibling != null) {
// if(o.nextSibling.nodeType == 1){
// nexts.push(o.nextSibling);
// }
// o = o.nextSibling;
// }
// 将两个数组进行合并，然后返回
// return prevs.concat(nexts);
// }
// console.log(getAllElementSibling(para));
// 如何改变元素节点中的内容
// 改变元素节点中的内容可以使用两个相关属性:
// innerHTML innerText
// innerHTML属性能以HTML语法设置节点中的内容
// innerText属性只能以纯文本的形式设置节点中的内容
// <div id="box"></div>
// <script>
// var oBox = document.getElementById('box');
// oBox.innerHTML = '慕课网';
// oBox.innerHTML = '<ul><li>牛奶</li><li>咖啡</li></ul>';
// oBox.innerText = '慕课网';
// oBox.innerText = '<ul><li>牛奶</li><li>咖啡</li></ul>';
// 如何改变元素节点的CSS样式
// 改变元素节点的CSS样式需要使用这样的语句:
// oBox.style.backgroundColor = 'red ' ;
// oBox.style.backgroundImage = 'url( images/1.jpg)';
// oBox.style.fontSize = '32px ';
// CSS属性要写成“驼峰”形式
// CSS属性值要设置成完整形式
// 注意写单位
// 如何改变元素节点的HTML属性
// 标准W3C属性，如src、href等等，只需要直接打点进行更改即可
// oImg.src = 'images/2.jpg' ;
// CSS属性值要设置成完整形式
// 注意写单位
// 如何改变元素节点的HTML属性
// 不符合W3C标准的属性，要使用setAttribute()和getAttribute(来设置、读取
// oBox.setAttribute( ' data-n',10);
// var n = oBox.getAttribute( ' data-n' );alert(n);
// 节点的创建
// document.createElement()方法用于创建一个指定tagname的HTML元素
// var oDiv = document. createElement( 'div ' );
// 孤儿节点
// 新创建出的节点是“孤儿节点”，这意味着它并没有被挂载到DOM树上，我们无法看见它
// 必须继续使用appendChild()或insertBefore()方法将孤儿节点插入到DOM树上
// appendChild()
// 任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点
// 父节点.appendChild(孤儿节点);
// insertBefore()
// 任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，成为它的“标杆子节点”之前的节点
// 父节点.insertBefore(孤儿节点，标杆节点);
//var oBox = document.getElementById( " box " );var oPs = oBox.getElementsByTagName( 'p');
//创建孤儿节点
//var oP = document.createElement( 'p');l/设置内部文字
//oP.innerText ='我是新来的';
//上树
//oBox.appendchild(oP);
//oBox.insertBefore(oP，oPs[e]);
// 移动节点
// 如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动
// 新父节点.appendChild(已经有父亲的节点);
// 新父节点.insertBefore(已经有父亲的节点，标杆子节点);
// 这意味着一个节点不能同时位于DOM树的两个位置
//最简单的设置事件监听的方法
// 最简单的给元素设置事件监听的方法就是设置它们的onxxx属性，像这样:
// oBox.onclick = function () i
//点击盒子时，将执行这里的语句
// }
// 常见的鼠标事件监听
// 事件名 事件描述
// onclick 当鼠标单击某个对象
// ondblclick 当鼠标双击某个对象
// onmousedown 当某个鼠标按键在某个对象上被按下
// onmouseup 当某个鼠标按键在某个对象上被松开
// onmousemove 当某个鼠标按键在某个对象上被移动
// onmouseenter 当鼠标进入某个对象（相似事件onmouseover)
// onmouseleave 当鼠标离开某个对象（相似事件onmouseout)
// 常见的键盘事件监听
// 事件名 事件描述
// onkeypress 当某个键盘的键被按下(系统按钮如箭头键和 功能键无法得到识别)
// onkeydown 当某个键盘的键被按下（系统按钮可以识别,并且会先于onkeypress发生)
// onkeyup 当某个键盘的键被松开
// 常见的表单事件监听
// onchange 当用户改变域的内容
// onfocus 当某元素获得焦点（比如tab键或鼠标点击)
// onblur 当某元素失去焦点
// onsubmit 当表单被提交
// onreset 当表单被重置
// 常见的页面事件监听
// 事件名 事件描述
// onload 当页面或图像被完成加载
// onunload 当用户退出页面
// 事件的传播
// 实际上，事件的传播是:先从外到内，然后再从内到外
// 捕获阶段 和冒泡 先捕获后冒泡
// addEventListener()方法
//DOMO级事件监听:只能监听冒泡阶段
//oBOx.onclick = function () {
//};
//DOM2级事件监听:
//oBox. addEventListener( 'click ' , function ( ) {
//这是事件处理函数
//}, true) ;事件名不加on true监听捕获阶段false监听冒泡阶段
// 什么是事件对象
// 事件处理函数提供一个形式参数，它是一个对象，封装了本次事件的细节
// 这个参数通常用单词event或字母e来表示
// oBox.onmousemove = function (e) {
//对象e就是这次事件的“事件对象”};
// 鼠标位置
// 属性 属性描述
// clientx 鼠标指针相对于浏览器的水平坐标
// clientY 鼠标指针相对于浏览器的垂直坐标
// pagex 鼠标指针相对于整张网页的水平坐标
// pageY 鼠标指针相对于整张网页的垂直坐标
// offsetx 鼠标指针相对于事件源元素的水平坐标
// offsetY 鼠标指针相对于事件源元素的垂直坐标
// e.charCode和e.keyCode属性
// e.charCode属性通常用于onkeypress事件中，表示用户输入的字符的“字符码”
// e.keyCode属性通常用于onkeydown事件和onkeyup中，表示用户按下的按键的“键码”
// e.preventDefault()方法
// e. preventDefault()方法用来阻止事件产生的“默认动作”
// 一些特殊的业务需求，需要阻止事件的“默认动作”
// e. stopPropagation()方法
// e.stopPropagation()方法用来阻止事件继续传播
// 在一些场合，非常有必要切断事件继续传播，否则会造成页面特效显示出bug
//事件委托
// 利用事件冒泡机制，将后代元素事件委托给祖先元素
// e.target和e.currentTarget属性
// 事件委托通常需要结合使用e.target属性
// 属性
// 属性描述
// target
// 触发此事件的最早元素，即“事件源元素”
// currentTarget事件处理程序附加到的元素
// 定时器
// setInterval()函数可以重复调用一个函数，在每次调用之间具有固定的时间间隔
// 第一个参数是函数
// setInterval(function ()
//这个函数将自动被以固定间隔时间调用}，2000) ;第二个参数是间隔时间，以毫秒为单位，1000毫秒是1秒
// setInterval(()函数可以接收第3、.......个参数，它们将按顺序传入函数
// setInterval(function (a, b) {
// 形式参数a的值是88，形式参数b的值是66}，2000，88，66);
// 从第三个参数开始，表示传入函数内的参数
// 具名函数也可以传入setlnterval
// 具名函数也可以传入setInterval
// var a = 0;
// function fun() {
// console.log(++a);
// }
// setInterval(fun，1000); 具名函数当做第一个参数，注意这里没有圆括号!
// 清除定时器
// clearInterval()函数可以清除一个定时器
//设置定时器，并且用timer变量接收这个定时器var timer = setInterval(function ( ) i},2000);
//点击按钮时，清除定时器
// oBtn. onclick = function ( ) {
// clearInterval(timer);
// }
// 延时器
// setTimeout()函数可以设置一个延时器，当指定时间到了之后，会执行函数一次，不再重复执行。
// setTimeout( function () {
//这个函数会在2秒后执行一次},
// 2000);
// 清除延时器
// clearTimeout()函数可以清除延时器，和clearInterval()非常类似
// 初步认识异步语句
// setInterval()和setTimeout(()是两个异步语句
// 异步(asynchronous) :不会阻塞CPU继续执行其他语句，当异步完成时，会执行“回调函数”(callback)
7549
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
