30-DOM元素的获取

第一节、DOM元素的获取

1.1、常用的一些获取DOM元素的方法

getElementById(“id值”)

规则：根据元素的id值获取元素，如果多个元素的ID值重复则获取第一个元素。

<script type="text/javascript">
    function testById(){
   
    /* document -- 文档--代表当前页面文档--代表当前HTML页面
			 */
    var doc =  document.getElementById("p1");
    console.log(doc);
}

getElementsByTagName(“标签名”)

规则：会将整个文档中所有相同的标签名获取出来，封装成nodeList

这个nodeList可以像数组一样操作（下标进行访问）

function testByTagName(){
   
    var docs =  document.getElementsByTagName("p");
    console.log(docs);
}

getElementsByName(“name值”)

规则：会将整个文档中name属性值相同的元素都获取，封装成nodeList

这个nodeList可以像数组一样操作（下标进行访问）

应用场景：单选按钮或者多选框（原因：一组单选或者多选框，每个元素之间必须有相同的name属性）

getElementsByClassName(“类名”)

规则：会将整个文档中name属性的值形同的元素都获取出来，封装成nodeList

这个nodeList可以像数组一样操作（下标进行访问）

父元素.querySelector(“选择器”)

规则：会将父元素中符号对应选择器的元素找出来,只会找第一个

父元素.querySelectorAll(“选择器”)

规则：会将父元素中符号对应选择器的元素找出来，全部找出来

var doc =  document.querySelectorAll("input[value='2']");//属性选择器
var doc = document.querySelector("#div1>div>p");
var docs =  document.querySelector("#div1 div:nth-child(3)");
var docs =  document.querySelector("#div1 div:last-child");//找div1最后一个儿子，如果是DIV元素则查找成

总结：此处的选择器可以是CSS中任意的选择器

注意：在IE8及其以下是不兼容的

1.2、通过节点与节点之间的关系进行查找元素

通过子关系

常用方法：

• 父节点.firstchild

  • 作用：找指定父元素的第一个子节点
  • 注意：浏览器在解析HTML文档的时候将所有的元素都解析成节点，包括文档中的空格 换行。。。

  支持链式调用： parent.firstChild.firstChild

• firstElementChild

  • 作用：找指定父元素的第一个子元素

• 父节点.lastChild

• 作用：找指定父元素的最后一个子节点

• 支持链式调用：可以和firstChild混用

• lastElementChild

  • 作用：找指定父元素的最后一个子元素

• parent.children

  • 作用：只找 父节点下的有意义的子节点（排除空格，注释）

• parent.childNodes)

  • 作用：会找出父节点下所有的子节点（元素，空格，注释…）

• 子元素.parentElement

  • 作用：找子元素的父元素

• 子元素.parentNode

  • 作用：找子元素的父节点

//找到父节点
var parent =  document.getElementById("div1"