元素通用属性-1

继承关系

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

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

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

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

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

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

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

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

EventTarget 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

所以 EventTargetNode 的属性方法,比如 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对象的 querySelectorquerySelectorAll 方法

参数是 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表达式选择元素,

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

比如

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

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

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

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

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

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

document.getElementsByTagName("input")[1]