节点:页面中的所有内容(标签,属性,文本(文字,换行,空格,回车)),node
节点的属性:(可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.出来)
nodeType:节点类型,返回:1-------标签,2---------属性,3------文本
nodeName:节点名字,返回:标签节点----大写的标签名字,属性节点-----小写的属性名字,文本节点-----#text
nodeValue:节点的值:标签节点–null,属性节点----属性值,文本节点-----文本内容
父子节点 兄弟节点
获取元素和节点
获取标签的父级节点
parentNode
获取标签的父级元素
parentElement
以上两个基本相同
子节点
childNodes
子元素
children
节点比元素多,因为子节点包括换行,空格
getAttributeNode 获取的是节点
例子
var node=getAttributeNode(‘id’); //获取的是属性节点
console.log(node.nodeType+’-------’+node.nodeName+’-------’+node.nodeValue);
输出:2--------id-------dv
获取第一个子节点
父级document.firstChild
获取第一个子元素
父级document.firstElementChild
获取最后一个子节点
父级document.lastChild
获取最后一个子元素
父级document.lastElementChild
某个元素的前一个兄弟节点
document.getaElementById(‘某个元素的id名字’).previousSibling
某个元素的前一个兄弟元素
document.getaElementById(‘某个元素的id名字’).previousElementSibling
某个元素的后一个兄弟节点
document.getaElementById(‘某个元素的id名字’).nextSibling
某个元素的后一个兄弟元素
document.getaElementById(‘某个元素的id名字’).nextElementSibling
以上属性在ie8中,获取的节点属性在ie8中获取的是元素,获取的元素属性不支持
总结:
凡是获取节点和元素的代码在谷歌和火狐中得到的都是 相关的节点和相关的元素
从子节点和兄弟节点开始,凡是获取节点的代码在ie8中得到的是元素,获取元素的相关代码,在ie8中得到的是undefined—ie8不支持
获取元素的兼容代码
function my$(id) {
return document.getElementById(id);
}
//获取的节点属性在ie8中获取的是元素,获取的元素属性不支持
// 获取第一个子元素的兼容写法
function getFirstChild(element) {
if (!element.firstElementChild) {
var node = element.firstChild;
while (node&&node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
else {
return element.firstElementChild;
}
}
// 获取z最后一个子元素的兼容写法
function getLastChild(element) {
if (!element.lastElementChild) {
var node = element.lastChild;
if (node.nodeType == 1 && node.nodeName == 'LI') {
node = node;
}
else {
node = node.previousSibling;
}
return node;
}
else {
return element.lastElementChild;
}
}
// 获取任意节点的前一个元素的兼容写法
function getBeforeChild(element) {
if (!element.previousElementSibling) {
var last = element.previousSibling;
while(last&&last.nodeType != 1) {
last = last.previousSibling;
}
return last;
}
else {
return element.previousElementSibling;
}
}
// 获取任意节点的后一个元素的兼容写法
function getNextChild(element) {
if (!element.nextElementSibling) {
var next = element.nextSibling;
while (next&&next.nodeType != 1 ) {
next = next.nextSibling;
}
return next;
}
else {
return element.nextElementSibling;
}
}
元素创建的三种方式
document.write(‘标签的代码及内容’);
创建元素,缺陷:如果是在页面加载完毕后,此时通过这个当时创建元素,出来这个元素,其他代码全部被删除
页面加载时创建,不会影响其他代码
可以嵌入外部网站的代码和地址
对象.innerHTML=‘标签的代码及内容’; 返回的是字符串
可以在某个标签中创建标签,不会对其他标签造成影响,如果是点击事件的话,点击后会重新为创建的标签赋值
若是在body中创建会和document.write(‘标签的代码及内容’);一样的效果
document.createElement('标签的名字 '); 返回的是对象
创建元素,再把元素追加(appendChild(element))到父级元素中
追加可以添加多个元素进入父级元素
var liObj=document.createElement('li');
ulObj.appendChild(liObj);
元素的相关方式
父元素.insertBefore(元素,某个元素)------将元素拆入道某个元素的前面
父元素.replaceChild(元素,某个元素)-----将元素替换某个元素
父元素.removeChild(存在的元素)--------移出父级元素的子元素–一次只能删一个
删除父级元素中的所有元素
while(父元素.firstElementChild)–判断是否有第一个子元素,有就删除
父元素.removeChild(存在的元素)-循环
只创建一个子元素
//方法一:有则删除,无则创建
function my$(id) {
document.getElementById(id);
}
if (my$('btn2')) {
my$('dv').removeChild(my$('btn2'));
}
var inpObj = document.createElement('input');
inpObj.value = '按钮' + i;
inpObj.type = 'button';
inpObj.id = 'btn2';
my$('dv').appendChild(inpObj);
//这个方法会将之前的删除,视觉显示是创建一个,但是每次点击按钮都是创建了新的按钮,删除了旧的按钮
//方法二
if (!my$('btn2')) {
var inpObj = document.createElement('input');
inpObj.value = '按钮' + i;
inpObj.type = 'button';
inpObj.id = 'btn2';
my$('dv').appendChild(inpObj);
}
只创建一个,有了之后不再创建,显示永远是最先创建的那个
为元素绑定多个事件
DOM :一种,但是不兼容有两种
对象.addEventListener(参数1,参数2,参数3)—ie8不支持–对象的一个方法
参数1:事件的类型–事件名字-没有on–String
参数2:事件处理函数(匿名函数,命名函数)
参数3:布尔类型,目前就写false
例子:
console.log(my$('btn'));
my$('btn').addEventListener('click',
function () {
console.log('我是第一个绑定的事件');
}, false);
-------
添加几个事件,就写几个这个函数
---
my$('btn').addEventListener('click',
function () {
console.log('我是第二个绑定的事件');
}, false);
对象.attachEvent(参数1,参数2)—只有ie8支持–对象的一个方法
参数1:事件类型----事件名字,有on
参数2:事件处理函数
补充:函数和方法的区别
函数可以直接调用
方法需要通过对象进行调用
所以函数和方法可以重名