JavaScript-获取DOM元素

发布于 2019-05-20  54 次阅读


什么是window?

window:是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象

什么是document?

document是window的一个属性, 这个属性是一个对象
document: 代表当前窗口中的整个网页,
document对象保存了网页上所有的内容, 通过document对象就可以操作网页上的内容

什么是DOM?

DOM 定义了访问和操作 HTML文档(网页)的标准方法
DOM全称: Document Object Model, 即文档模型对象
所以学习DOM就是学习如何通过document对象操作网页上的内容

注意点:

  • 1.在JavaScript中HTML标签也称之为DOM元素
  • 2.使用document的时候前面不用加window

通过id获取指定元素 getElementById

  • 由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回Null
  • 注意点: DOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)
//document有个getElementById方法调用它后传入指定的id就行了,然后赋值给一个接收变量
let oDiv = document.getElementById("box");
    console.log(oDiv);
    console.log(typeof oDiv);

通过class名称获取 getElementsByClassName

  • 由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
//通过getElementsByClassName获取标签,圆括号里传入类选择器名称
let oDiv = document.getElementsByClassName("father");
    console.log(oDiv);

通过name名称获取 getElementsByName

  • 由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组

注意点:
getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中, getElementsByName() 方法还会返回那些 id 为指定值的元素。getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中, getElementsByName() 方法还会返回那些 id 为指定值的元素。

<div class="father">
    <form>
        <input type="text" name="test">
        <input type="password" name="test">
    </form>
</div>
<div class="father" id="box">我是div</div>

//下面是JavaScript代码,上面是Dom元素
let oDivs = document.getElementsByName("test")
    console.log(oDivs);

通过标签名称获取 getElementsByTagName

  • 由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
let oDivs = document.getElementsByTagName("div");
    console.log(oDivs);

通过选择器获取 querySelector

  • querySelector只会返回根据指定选择器找到的第一个元素
let oDiv = document.querySelector(".father");
    console.log(oDiv);

通过选择器获取 querySelectorAll

  • querySelectorAll会返回指定选择器找到的所有元素
let oDivs = document.querySelectorAll(".father");
    console.log(oDivs);

获取指定元素所有的子元素

什么是节点?

  • DOM对象(document), 这个对象以树的形式保存了界面上所有的内容
  • HTML页面每一部分都是由节点(标签(元素),文本,属性)
    图片来源于W3C官方文档

children属性获取到的是指定元素中所有的子元素

let oDiv = document.querySelector("div");
//在对象中有个属性children,对象.属性就可以了
    console.log(oDiv.children);

childNodes属性获取到的是指定元素中所有的节点

  • 回车也算文本节点
let oDiv = document.querySelector("div");
    console.log(oDiv.childNodes);


改变思想才能改变我们的人生