DOM 获取元素节点 的 n多方法

dom

获取元素节点 的 n多方法

/**

• 根据'标签名'进行元素的获取
• 由于html中可以存在多个相同的标签名的元素
• 因此接受的变量是可以存储多个数据的类数组
• 通过下标获取具体的内容。
  */
  // let ulele = document.getelementsbytagname("ul")[0];
  // console.log(ulele);

//通过name的属性值获取元素
// let inputele = document.getelementsbyname("f70")[0];
// console.log(inputele);

//通过id值获取元素
// let liele = document.getelementbyid("box");
// console.log(liele);

//通过类名获取元素
// let leiname = document.getelementsbyclassname("f70");
// console.log(leiname[2]);

//获取父元素
/**

• 1、获取一个元素（子元素）
• 2、通过这个元素找其父元素
  */

// let navele = document.getelementsbytagname("nav")[0];
// console.log(navele);
// //书写格式：子元素.parentnode
// let headerele = navele.parentnode;
// console.log(headerele);

/**

• 获取子元素节点
• 书写格式:父元素.children
  *children：非标准属性，它返回指定元素的子元素集合。
  */
  // let eles1 = headerele.children;
  // console.log(eles1);

/**

• 获取子节点(元素、文本、注释)
• 书写格式:父元素.childnodes
  *childnodes：它是标准属性，它返回指定元素的子元素集合，包括html节点，所有属性，文本节点。
  */
  // let eles2 = headerele.childnodes;
  // console.log(eles2);

// //获取第一个子节点
// let feles = headerele.firstchild;
// console.log(feles); //#text
// //获取第一个子元素节点
// feles = headerele.firstelementchild;
// console.log(feles); //

123

// //获取最后一个子节点
// let leles = headerele.lastchild;
// console.log(leles); //#text
// //获取最后一个子元素节点
// leles = headerele.lastelementchild;
// console.log(leles); //

"123"

let elebutt = document.getelementsbytagname(button)[1]
console.log(
1, elebutt.parentelement, // 他的父节点
2, elebutt.firstelementchild, //他的子节点 （第一个）
3, elebutt.lastelementchild, //他的子节点 （最后一个）
4, elebutt.children, //他的子节点 （所有）
5, elebutt.previouselementsibling, //节点的上一个节点 （兄弟关系）
6, elebutt.nextelementsibling, //节点的下一个节点 （兄弟关系）
);