DOM基础测试36：textarea DOM操作

[wingmeng]

题目：

---

我的回答：

第 1 题：

// 方法1
const myTextarea = document.querySelector('textarea');

// 方法2
const myTextarea = document.getElementsByTagName('textarea')[0];

第 2 题：

// 方法1
myTextarea.rows = 5;

// 方法2
myTextarea.setAttribute('rows', 5);

第 3 题：

// 用 clientHeight  获取会包含 padding，所以用下面方法获取计算样式来得到高度
const { height } = window.getComputedStyle(myTextarea);
console.log(height);  // Chrome: 75px, FF: 112px

第 4 题：

textarea 默认的 lineHeight 值为 normal，此时是无法计算的，而且每个浏览器解析出的 normal 数值存在差异，另外它的值还和字体有关。详情 所以想要实现题目中的要求的话，有个大前提就是必须通过 CSS Reset 的方式对 textarea 的行高进行预定义，我这里采用了 Normalize.css 中的相关样式：

textarea {line-height: 1.15;}

然后就可以正常获取行高进行后续计算了：

const { lineHeight } = window.getComputedStyle(myTextarea);
myTextarea.style.height = parseFloat(lineHeight) * myTextarea.rows + 'px';

第 5 题：

起先想到了用 MutationObserver，发现 IE11+ 才支持，所以采用监听 DOM 节点的 API 来实现。 网上说 DOMNodeInserted 事件在 IE9 下有bug：（传送门）

Note that the DOMNodeInserted event is buggy in Internet Explorer 9, it is not fired when a node is inserted for the first time. See the examples below for details.

实际在 IE11 通过文档模式模拟 IE9 时没有发现这个bug，由于手头没有原生 IE9，所以不好做判断

document.addEventListener('DOMNodeInserted', function(event) {
  var elm = event.target;

  if (elm.nodeName.toLowerCase() === 'textarea') {
    var lineHt = window.getComputedStyle(elm).lineHeight;
    elm.style.height = parseFloat(lineHt) * elm.rows + 'px';
  }
});

[wingmeng]

自我评分：优秀

优秀、良好、一般、差劲

学习收获：

1. textarea 在不同浏览器下的高度渲染差异；
2. 复习 MutationObserver 观察者模式。