JS DOM基础

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

文档:document---页面中的*对象

元素:页面中的所有标签   标签---元素---对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)

节点的属性:作用,为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素

节点的类型:1标签节点,2属性节点,3文本节点

nodeType:节点的类型,1---标签节点,2---属性节点,3---文本节点

nodeName:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点---#text

nodeValue:标签---null,属性---属性的值,文本---文本内容

if(node.nodeType==1&&node.nodeName=="p")

 

  1. 获取当前节点的父级节点

console.log(my$("uu").parentNode);

  1. 获取当前节点的父级元素

console.log(my$("uu").parentElement);

  1. 获取当前节点的子级节点

console.log(my$("uu").childNodes);

  1. 获取当前节点的子级元素

console.log(my$("uu").children);

  1. 获取当前节点的第一个子级节点

console.log(my$("uu").firstChild);

JS DOM基础

元素创建的三种方式

  1. document.write(“标签代码及内容”);如果在页面加载完毕后创建元素.页面中的内容会被干掉
  2. 父级对象.innerHTML=“标签代码及内容”;
  3. document.createElement(“标签名字”);得到的是一个对象,父级元素.appendChild(子级元素对象);

父级元素.inerstBefore(新的子级对象,参照的子级对象);

移除子级元素 父级元素.removeChild(要干掉的子级对象);

JS DOM基础

JS DOM基础

绑定事件区别

JS DOM基础

JS DOM基础