JavaScript_DOM

DOM

DOM: document object model 文档对象模型,主要提供一些操作文档的属性和方法
操作元素节点的属性和方法

获取元素的方法:

1. 根据id名来获取元素
   document.getElementById(‘id名’)
   返回值:获取的元素
2. 根据class名来获取 document.getElementsByClassName(‘class名’)
   返回值:是一个伪数组,需要通过索引的形式 获取里面的元素
3. 根据标签名来获取 document.getElementsByTagName(‘标签名’)
   返回值:是一个伪数组,需要通过索引的形式 获取里面的元素
   使用这种方法获取元素的集合,不可以使用forEach的方法
4. document.querySelector(’ .class名 || #id名 || 标签名 || 选择器(.box span) ')
   返回值:获取的是第一个满足条件的元素
5. document.querySelectorAll(’ .class名 || #id名 || 标签名 || 选择器(.box span) ')
   返回值: 以伪数组的形式返回所有满足的元素
   使用这种方法获取元素的集合,是可以使用forEach的方法
6. document.getElementsByName(‘标签XXX属性中的属性值’): 根据标签XXX属性的属性值来获取元素
   返回值: 返回一个节点集合

	<input type="text" name="user">
    <input type="text" name="user">
    var user = document.getElementsByName("user");
    console.log(user);
    // NodeList(2)

操作元素的属性:

innerText : 只获取文本内容 , 设置的时候内容有标签的时候,也不会当成标签去解析,直接当成内容显示
innerHTML : 获取标签的所有内容(包括子标签),设置的时候有标签也会当初标签解析
style : 获取或者设置元素的样式,只能获取行内样式
className : 获取或者设置元素的class名,覆盖式的设置
id : 获取或者设置元素的id名