<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="common.js"></script>
<script>
/*节点
节点：页面中所有的内容都是节点（标签，属性，文本：文字，空格，换行）
文档：document----页面中的顶级对象
元素：页面中所有的标签，标签--元素--对象（通过DOM的方式来获取这个标签，
得到了这个对象，此时这个对象叫DOM对象）
节点的属性：作用：为了将来获取很多节点，得到节点中的标签（元素），识别节点中的标签元素
nodeType:节点的类型（1---标签节点，2--属性节点，3--文本节点）
nodeName：标签节点--大写的标签名字,属性节点---小写的属性名字，文本节点--#text
nodeValue：标签---null,属性----属性的值，文本--文本内容
if(node.nodeType==1&&node.nodeName=="P")//p标签
获取节点及元素的代码(见下)
元素的创建
三种元素创建的方式
1、document.write("标签代码及内容");如果在页面加载完毕后创建元素，页面中的内容
会被干掉
2、父级对象.innerHTML=“标签代码及内容”；
3、document.createElement("标签名字")；得到的是一个对象
父级元素.appendChild（子级元素对象）
父级元素.insertBefore（新的子级对象，参照的子级对象）
移除子元素---父级元素.removeChild（要干掉的子级元素对象）
事件的绑定：为同一个元素绑定多个相同的事件
三种方式：
1、对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式，最后一个执行，之前的被覆盖了
my$("btn").οnclick=function(){};
2、对象.addEventListener("click",function(){},false);ie8不支持
my$("btn").addEventListener("click",function,false);
3、对象.attachEvent(“有on的事件名字”,事件处理函数);谷歌火狐不支持
my$("btn").attachEvent("onclick",function(){});
* */
//为任意的一个元素，绑定任意的一个事件
function addEventListener(element,type,fn) {
if(element.addEventListener)
{
element.addEventListener(type,fn,false);
}else if(element.attachEvent)
{
element.attachEvent("on"+type,fn);
}else{
element["on"+"type"]=fn;
}
}
//获取当前节点的父级节点
console.log(my$("uu").parentNode);
//获取当前节点的父级元素
console.log(my$("uu").parentElement);
//获取当前节点的子级节点
console.log(my$("uu").childNodes);
//获取当前节点的子级元素
console.log(my$("uu").children);
//获取当前节点的第一个子级节点
console.log(my$("uu").firstChild);
//获取当前节点的第一个子级元素
console.log(my$("uu").firstElementChild);
//获取当前节点的最后一个子级节点
console.log(my$("uu").lastChild);
//获取当前节点的最后一个子级元素
console.log(my$("uu").lastElementChild);
//获取当前节点的前一个兄弟节点
console.log(my$("uu").previousSibling);
//获取当前节点的前一个兄弟元素
console.log(my$("uu").previousElementSibling);
//获取当前节点的后一个兄弟节点
console.log(my$("uu").nextSibling);
//获取当前节点的后一个兄弟元素
console.log(my$("uu").nextElementSibling);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="common.js"></script>
<script>
/*节点
节点：页面中所有的内容都是节点（标签，属性，文本：文字，空格，换行）
文档：document----页面中的顶级对象
元素：页面中所有的标签，标签--元素--对象（通过DOM的方式来获取这个标签，
得到了这个对象，此时这个对象叫DOM对象）
节点的属性：作用：为了将来获取很多节点，得到节点中的标签（元素），识别节点中的标签元素
nodeType:节点的类型（1---标签节点，2--属性节点，3--文本节点）
nodeName：标签节点--大写的标签名字,属性节点---小写的属性名字，文本节点--#text
nodeValue：标签---null,属性----属性的值，文本--文本内容
if(node.nodeType==1&&node.nodeName=="P")//p标签
获取节点及元素的代码(见下)
元素的创建
三种元素创建的方式
1、document.write("标签代码及内容");如果在页面加载完毕后创建元素，页面中的内容
会被干掉
2、父级对象.innerHTML=“标签代码及内容”；
3、document.createElement("标签名字")；得到的是一个对象
父级元素.appendChild（子级元素对象）
父级元素.insertBefore（新的子级对象，参照的子级对象）
移除子元素---父级元素.removeChild（要干掉的子级元素对象）
事件的绑定：为同一个元素绑定多个相同的事件
三种方式：
1、对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式，最后一个执行，之前的被覆盖了
my$("btn").οnclick=function(){};
2、对象.addEventListener("click",function(){},false);ie8不支持
my$("btn").addEventListener("click",function,false);
3、对象.attachEvent(“有on的事件名字”,事件处理函数);谷歌火狐不支持
my$("btn").attachEvent("onclick",function(){});
* */
//为任意的一个元素，绑定任意的一个事件
function addEventListener(element,type,fn) {
if(element.addEventListener)
{
element.addEventListener(type,fn,false);
}else if(element.attachEvent)
{
element.attachEvent("on"+type,fn);
}else{
element["on"+"type"]=fn;
}
}
//获取当前节点的父级节点
console.log(my$("uu").parentNode);
//获取当前节点的父级元素
console.log(my$("uu").parentElement);
//获取当前节点的子级节点
console.log(my$("uu").childNodes);
//获取当前节点的子级元素
console.log(my$("uu").children);
//获取当前节点的第一个子级节点
console.log(my$("uu").firstChild);
//获取当前节点的第一个子级元素
console.log(my$("uu").firstElementChild);
//获取当前节点的最后一个子级节点
console.log(my$("uu").lastChild);
//获取当前节点的最后一个子级元素
console.log(my$("uu").lastElementChild);
//获取当前节点的前一个兄弟节点
console.log(my$("uu").previousSibling);
//获取当前节点的前一个兄弟元素
console.log(my$("uu").previousElementSibling);
//获取当前节点的后一个兄弟节点
console.log(my$("uu").nextSibling);
//获取当前节点的后一个兄弟元素
console.log(my$("uu").nextElementSibling);
</script>
</body>
</html>
2515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
