元素通用属性-1

继承关系

通过前面的简介，我们知道了，要用js代码改变界面元素展示的内容、样式，需要先获取该元素对应的 DOM 对象，然后再通过调用对象的属性或者方法。

不同类型的HTML元素对应的 DOM 对象类型不同，属性、方法也会有差异。

但是所有的 HTML元素对象都有相同的继承关系

一个链接a元素对象它的类型是 HTMLAnchorElement ，对应的继承关系如下

EventTarget <- Node <- Element <- HTMLElement <- HTMLAnchorElement

而 img 对应的 HTMLImageElement 对应的继承关系如下

EventTarget <- Node <- Element <- HTMLElement <- HTMLImageElement

每个html元素前面的继承链都是

Node Element HTMLElement

我们知道，js对象可以使用其祖先类型的属性/方法

所以所有的HTML元素，不管是 p、div、span、button ，他们对应的对象，都可以使用 EventTarget、Node、Element、HTMLElement 这些祖先类型的属性和方法

我们先学习这些元素祖先类型常用的属性和方法，也就是页面元素DOM对象通用的属性和方法

EventTarget

EventTarget类型提供了如下方法

addEventListener()

用来注册处理该对象的事件的处理函数。

前面已经讲过，比如

<button id='target'>测试按钮</button>

<script>     
  let targetBtn = document.querySelector('#target')

  // 注册事件回调函数
  targetBtn.addEventListener(
    "click",
    ()=>{alert('测试按钮被点击了')}
  )
</script>

对于事件注册处理，后面的章节有专门的讲解，这里不赘述。

removeEventListener()

这是类型 EventTarget 的方法，用来取消注册处理该对象的事件的处理函数。

是 addEventListener 的反操作。

<button id='target'>测试按钮</button>
<button id='cancel'>取消事件处理</button>

<script>     
  let targetBtn = document.querySelector('#target')
  let cancelBtn = document.querySelector('#cancel')

  function targetClicked() {
    alert('测试按钮被点击了')
  }

  targetBtn.addEventListener("click",targetClicked)

  cancelBtn.addEventListener("click", 
    ()=>{
      alert('取消测试按钮点击处理')
      targetBtn.removeEventListener("click",targetClicked)
    }
  );
</script>

Node

Node类型提供了如下属性和方法

获取所有子节点

childNodes属性可以获取元素的所有子节点对象

看这个例子

<p id="source">p文本1
<!-- 注释1 -->
<span id='text1'>span文本1</span>
p文本
2
<span id='text2'>span文本2</span>
p文本
3
</p>

<script>
const source = document.querySelector("#source");

console.log(source.childNodes)

// 打印出获取子节点的类型
for (let node of source.childNodes)
  console.log(node.constructor.name)
</script>

运行结果如下

NodeList(7) [text, comment, text, span#text1, text, span#text2, text]
Text
Comment
Text
HTMLSpanElement
Text
HTMLSpanElement
Text

可以发现，获取的子节点是所有的DOM子节点，包括 html元素、文本、注释

返回的NodeList 类型，类似数组，可以使用for of 遍历，里面的对象就是各自节点对应的类型

textContent

textContent 属性用来获取元素内部所有的文本内容，包括不可见的部分

看一个例子

<p id="source">
<span id="text">看一下<br>这个内容<br>如何变化</span>
<span style="display:none">隐藏内容</span>
</p>

<script>
const source = document.querySelector("#source");

console.log(source.textContent)
</script>

这个属性也可以用来设置元素内部文本内容

比如

<p id="source">
  原来的内容
</p>

<script>
const source = document.querySelector("#source");

source.textContent = '新内容'
</script>

获取父元素节点

parentElement 该属性返回这个Node的父HTML元素

看一个例子

<p>p文本
  <span id="text">span文本</span>
</p>

<script>
const span = document.querySelector("#text");

console.log(span.textContent)
console.log(span.parentElement.textContent)
</script>

运行结果显示 span文本

注意获取的是父html元素节点，而不是父节点，如果没有父元素节点，返回null

内置对象document

内置对象 document 的类型是 Document ，继承关系如下

EventTarget <- Node <- Document

所以 EventTarget 和 Node 的属性方法，比如 addEventListener() , childNodes 等等，对 document都是适用的

常用方法如下

产生元素对象

createElement 方法可以产生元素对象。

产生的元素对象可以通过后续讲解的方法添加到DOM中

比如

<body>
  <p id='target'>原来的元素</p>
</body>

<script>
  let p = document.querySelector('#target')

  const new1 = document.createElement("p");
  new1.textContent = '新元素1';

  p.after(new1);
</script>

寻找内部元素

寻找内部元素，最灵活的方法就是通过 document对象的 querySelector 、 querySelectorAll 方法

参数是 CSS 选择表达式，来选择元素。

比如，

<body>

  <span id="notify" style='color:blue'>
  请输入员工薪资记录</span> <br><br>

  <textarea id="salary" rows="20" cols="80"></textarea>

  <div>
    <br><br>
    <span id="result" style='color:blue' >
    分类结果</span> <br><br>


    <pre>
    </pre>
  <div>

</body>

要选择分类结果的 span 这个元素，可以有好几种写法

控制台中运行如下代码

//  tag名选择
document.querySelector('textarea')

//  id选择
document.querySelector('#result')
// 还可以 使用 getElementById
document.getElementById('result')


//  范围选择
document.querySelector('div span')

css 选择器，前面有专门讲解，这里就不赘述了。

如果，没有找到符合条件的元素，返回 null

querySelector 方法，返回的是HTML中第一个符合选择表达式的元素。

如果要选择所有符合选择表达式的元素，可以使用 querySelectorAll 方法，返回的是一个类似数组的对象NodeList，里面存放了所有符合条件的 DOM 对象

// 返回 NodeList
let list = document.querySelectorAll('input[type=checkbox]')

// 遍历 NodeList，就像遍历数组
for (let checkbox of list) {
  checkbox.checked = true;
}

// NodeList里面的第2个元素
list[1]

通过 document 调用 querySelector/querySelectorAll 是在整个DOM 里面选择元素。

如果要在某个 DOM 元素的内部范围内选择，就可以调用这个元素 DOM 对象的 querySelector/querySelectorAll 方法。

比如

document.querySelector('div').querySelector('span')

后面讲解 Element类型时会讲到

除了css表达式选择元素，

还可以直接根据元素的 id 、 name属性 、 标签名 、 class属性 选择元素

比如

// 根据id选择，返回单个元素对象
document.getElementById("myDiv")

// 根据name属性选择，返回的是一组元素对象
document.getElementsByName("btn")

// 根据标签名选择，返回的是一组元素对象
document.getElementsByTagName("input")

// 根据class属性选择，返回的是一组元素对象
document.getElementsByClassName("btn")

注意返回的一组对象时，是放在一个类似数组的对象 HTMLCollection 中的

就行数组一样，可以直接通过索引访问对应的元素

document.getElementsByTagName("input")[1]