获取节点及元素的代码

我不是女神ヾ 2021-12-16 19:29 256阅读 0赞

<!DOCTYPE html>

<head>

<title>title</title>

/\*

\* 节点:

\* 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)

\* 文档：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").οnclick=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>

// var pObj=document.createElement("p");

// 父级元素.appendChild(pObj);

</script>

</body>

</html>

转载于:https://www.cnblogs.com/lujieting/p/10509795.html

获取节点及元素的代码

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery获取当前元素的其他元素节点

相关 jquery 获取当前元素的前一个兄弟节点元素

相关 uni-app获取元素节点信息

相关【代码库】删除select元素节点下所有的OPTION节点

相关 JQuery获取节点的html代码

相关 js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

相关【JavaScript & jQuery】获取元素各个节点 (父节点,子节点,兄弟节点),元素筛选

相关获取节点及元素的代码

相关 vue怎样操作元素怎样获取元素节点

相关小程序如何获取dom 元素节点