获取节点及元素的代码
Posted lujieting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取节点及元素的代码相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
/*
*
* 节点:
* 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)
* 文档：document---页面中的顶级对象
* 元素:页面中所有的标签, 标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
* 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素
* 节点的类型:1标签节点,2属性节点,3文本节点
* nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点
* nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text
* nodeValue:标签---null,属性---属性的值,文本---文本内容
* if(node.nodeType==1&&node.nodeName=="P")
*
* 获取节点及元素的代码(下面呢)
*
*
*
* 元素的创建
* 三种元素创建的方式
* 1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
* 2. 父级对象.innerHTML="标签代码及内容";
* 3. document.createElement("标签名字");得到的是一个对象,
* 父级元素.appendChild(子级元素对象);
* 父级元素.inerstBefore(新的子级对象,参照的子级对象);
* 移除子元素
* 父级元素.removeChild(要干掉的子级元素对象);
*
* 事件的绑定:为同一个元素绑定多个相同的事件
* 三种方式:
* 1. 对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了
* my$("btn").onclick=function(){};
* 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);
* 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;
}
}
// my$("btn")["on"+"click"]=function(){};
//
// var obj={
// name:"张三",
// sayHi:function () {
//
// }
//
// };
//获取当前节点的父级节点
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);
// document.write("<p>这是一个p</p>")
//
// document.body.innerHTML="<p>这是一个p</p>";
</script>
</head>
<body>
<script src="common.js"></script>
<script>
// var pObj=document.createElement("p");
// 父级元素.appendChild(pObj);
</script>
</body>
</html>
以上是关于获取节点及元素的代码的主要内容，如果未能解决你的问题，请参考以下文章
JS-DOM ～ 03. 子节点的操作style.样式和属性dom元素的创建方法及操作14个例题主要是利用js直接控制html属性