解析html dom 原理,HTML DOM focus() 方法之原理

1支持焦点

W3C规定，只有web page明确设置了tabIndex的Element才定义为支持焦点，他是这么定义一个Node是否支持焦点的：

bool Node::supportsFocus() const

{

return hasRareData() && rareData()->tabIndexSetExplicitly();

}

2 可被设置焦点

首先，Node必须支持焦点，其次，此Node的render对象RenderBox必须存在，而且此RenderBox的style属性设置为可见

bool Node::isFocusable() const

{

if (!inDocument() || !supportsFocus())

return false;

if (renderer())

ASSERT(!renderer()->needsLayout());

else

// If the node is in a display:none tree it might say it needs style recalc but

// the whole document is actually up to date.

ASSERT(!document()->childNeedsStyleRecalc());

// FIXME: Even if we are not visible, we might have a child that is visible.

// Hyatt wants to fix that some day with a "has visible content" flag or the like.

if (!renderer() || renderer()->style()->visibility() != VISIBLE)

return false;

return true;

}

3 按键可获取焦点

一个Element能否获取焦点，取决于：

1)自己“可被设置焦点”

2)tabIndex是正整数

bool Node::isKeyboardFocusable(KeyboardEvent*) const

{

return isFocusable() && tabIndex() >= 0;

}

4 鼠标可获取焦点

只需要判断“可被获取焦点”就行了：

bool Node::isMouseFocusable() const

{

return isFocusable();

}