HTML和DOM

时间:2019-08-06
本文章向大家介绍HTML和DOM,主要包括HTML和DOM使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

Attributes and properties

当浏览器加载页面时,它会“读取”(或者称之为:“解析”)HTML 文本并生成 DOM 对象。对于元素节点,大多数 HTML 特性会自动变成 DOM 对象的属性.

HTML的特性和DOM对象的属性

并不是每个HTML文本生成DOM对象时都可以创建所有属性,只有对应的标准化特性才可以,比如每个元素都有的idinput 含有type

如果没有自动生成想要的属性,可以自己添加吗?

    elem.hasAttribute(name) —— 检验是否拥这个特性
    elem.getAttribute(name) —— 获取到这个特性值
    elem.setAttribute(name, value) —— 设置这个特性值
    elem.removeAttribute(name) —— 移除这个特性
    elem.attributes —— 所有特性的集合
<body something="non-standard">
  <script>
    alert(document.body.getAttribute('something')); // non-standard
  </script>
</body>

getAttribute('About')大小写时不区分的,attributesnamevalue 这样的键—值对收集在一个可迭代对象里

特性与属性同步

<input>

<script>
  let input = document.querySelector('input');

  // 特性 => 属性
  input.setAttribute('id', 'id');
  alert(input.id); // id(更新了)

  // 属性 => 特性
  input.id = 'newId';
  alert(input.getAttribute('id')); // newId(更新了)
</script>

有些只能从单向传递

<input>

<script>
  let input = document.querySelector('input');

    // 特性 => 属性
  input.setAttribute('value', 'text');
  alert(input.value); // text
    
    // 这操作无效 属性 => 特性
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text(没有更新!)
</script>

当属性值时布尔值

<input id="input" type="checkbox" checked> checkbox

<script>
  alert(input.getAttribute('checked')); // 特性值是:空字符串
  alert(input.checked); // 属性的值是:true
</script>

当属性值是对象时

<div id="div" style="color:red;font-size:120%">Hello</div>

<script>
  // 字符串
  alert(div.getAttribute('style')); // color:red;font-size:120%

  // 对象
  alert(div.style); // [object CSSStyleDeclaration]
  alert(div.style.color); // red
</script>

还有一个非常重要的不同点。DOM 属性的字符串可能跟特性值的字符串所表示的不是同一个东西!

例如 href DOM 属性总是一个绝对路径的,而特性值只包含相对路径或者只包含 #hash 这一部分。

这里有一个例子:

<a id="a" href="#hello">link</a>
<script>
  // 特性
  alert(a.getAttribute('href')); // #hello

  // 属性
  alert(a.href ); // 绝对路径 http://site.com/page#hello
</script>

但是自定义的特性也存在问题。如果我们使用了一个非标准化的特性,之后却变成了一个标准化的值并用来做其他事情,HTML 语言一直在发展,越来越多的标准化特性解决了开发者的开发需求。这就是一个不可控的例子。

为了解决这个冲突产生了 data-* 这个特性。

所有以 “data-” 开头的特性值可以给编程人员正常使用,同时它还是 dataset 合法值。

例如, 如果一个 elem 有一个键名是 "data-about" 的特性,那么可以通过 elem.dataset.about 取到这个合法值。

像这样:

<body data-about="Elephants">
<script>
  alert(document.body.dataset.about); // Elephants
</script>
<!DOCTYPE html>
<html>
<body>

  <div data-widget-name="menu">Choose the genre</div>

  <script>
    console.log(document.body.firstElementChild.dataset.widgetName)
  </script>
</body>
</html>

$flag 上一页 下一页