JavaScript dom Knowledge (i)

Features, methods	Type, return type	Description
NodeName	String	The name of the node, as defined by the node type
NodeValue	String	The value of the node, as defined by the type of the node
NodeType	Number	One of the type constant values of the node
Ownerdocument	Document	Returns the root node of an element
Fristchild	Node	Point to the first node in the ChildNodes list
LastChild	Node	Point to the last node in the Chilidnodes list
ChildNodes	NodeList	List of all child nodes
PreviousSibling	Node	Returns the previous sibling node of the selected node, if no null is returned
NextSibling	Node	Returns the next sibling node of the selected node, if no null is returned
HasChildNodes ()	Boolean	Returns whether the current element has child nodes
AppendChild (node)	Node	Add node to the end of ChildNodes
RemoveChild (node)	Node	Remove node from childnodes
ReplaceChild (New,old)	Node	Replace old in childnodes with new
InsertBefore	Node	Inserting new nodes before existing child nodes

2. NodeType the type of node returned

---element node returns 1

---property node returns 2

---text node returns 3

3, InnerHTML and NodeValue

For text nodes, the NodeValue property contains text;

For attribute nodes, the NodeValue property contains the property value;

    nodeValue 属性对于文档节点和元素节点是不可用的。

The difference between the two:

Box.childnodes[0].nodevalue = ' <strong>abc</strong> ';  // The result: <strong>abc</strong> // The result is: ABC

4, TagName

document.getElementByTagName(tagName)：返回一个数组，包含对这些结点的引用     

getElementsByTagName()Method will return an array of objects that HTMLCollection(NodeList) hold a list of all nodes of the same element name.

document.getElementsByTagName(‘*‘);//获取所有元素

PS: IE When using wildcards, the browser uses the canonical declaration from the beginning of the document html as the first element node.

document.getElementsByTagName(‘li‘);//获取所有 li 元素，返回数组document.getElementsByTagName(‘li‘)[0];//获取第一个 li 元素，HTMLLIElementdocument.getElementsByTagName(‘li‘).item(0);//获取第一个 li 元素，HTMLLIElementdocument.getElementsByTagName(‘li‘).length;//获取所有 li 元素的数目

5, the absolute reference of the node:

返回文档的根节点：document.documentElement返回当前文档中被击活的标签节点：document.activeElement返回鼠标移出的源节点：event.fromElement返回鼠标移入的源节点：event.toElement返回激活事件的源节点：event.srcElement

6, the relative reference of the node: (Set the current node to nodes)

7. Node Information

8. Create a new node

createDocumentFragment()－－创建文档碎片节点createElement(tagname)－－创建标签名为tagname的元素createTextNode(text)－－创建包含文本text的文本节点

9、获取鼠标单击事件的位置

varMouseClick =function(e) {varE = e | | window.event;//compatible with IE    varx = 0, y = 0; if(E.pagex) {x=E.pagex; Y=E.pagey; } Else if(e.clicentx) {varOffsetX = 0, OffsetY = 0; if(document.documentElement.scrollLeft) {OffsetX=Document.documentElement.scrollLeft; OffsetY=Document.documentElement.scrollTop; } Else if(document.body) {OffsetX=Document.body.scrollLeft; OffsetY=Document.body.scrollTop; } x= E.clientx +OffsetX; Y= E.clienty +OffsetY; } console.log ("The location you clicked is" + x + "," +y);}; Document.onclick= MouseClick;

Here we need to parse, see the JavaScript in the scroll event explained that some browsers on the scroll event is implemented differently;

Three concepts: The difference between a pagex,clientx,screenx:

1. Clientx,clienty indicates the horizontal and vertical coordinates of the mouse pointer in the viewport when the event occurs:

2, Pagex,pagey represents the coordinates in the page position, that is, in the body position;

3, Screenx and Screeny: When a mouse event occurs, there is not only a location relative to the browser window, but also a position relative to the entire computer screen. The Screenx and Screeny properties allow you to determine the coordinates of the mouse pointer relative to the entire computer screen when the mouse event occurs;

Problem one: Firefox , Chrome , Safari and IE9 both are through non-standard events pageX and pageY properties to get the mouse position of the Web page. pageX/Ygets the distance from the upper-left corner of the trigger point relative to the document area, with the page as the reference point and not as the slider moves.

Problem two: In IE, the event object has x , the y attribute (the coordinates and coordinates where the event occurred x y ) is not in Firefox. In Firefox, with event.x the equivalent is event.pageX . event.clientX event.pageX There are subtle differences (when the entire page has scroll bars), but most of the time it is equivalent.

offsetX: IE Unique, chrome also support. The mouse is compared to the position of the element that triggered the event, with the upper-left corner of the content area of the element box model as the reference point and, if present boder , a negative value

Question three:
scrollTopThe distance that the scroll bar moves down, which is supported by all browsers document.documentElement .

Other references: Http://segmentfault.com/a/1190000002559158#articleHeader11

JavaScript dom Knowledge (i)