6.0 DOM API

Time:2020-11-29

DOM:Document/Object/Model

DOM is a tree with nodes, which are divided into document (HTML), element (element), text (text), comment (comment) and others

DOMThe main function is: throughConstructorPutnodeBecomeobjectBy calling theAPI To manipulate objects

 

 

——————————————————————————————————————————————————————-

 

Interface of node

1. Properties

nodeName,nodeType,nodeValue,

childNodes,parentNode,parentElement

firstChild,lastChild,nextSibling,previousSibling

InnerText, textcontent

outerText,ownerDocument

———————————————————————————————————————————————————————————

Some problems needing attention

document.body.childNodes   Get child node(will get text node)

document.body.children      Get word Tags(text nodes will not be obtained)

 

How to get text

The difference between innerText (ie) and textconten (Firefox)

(innerText is aware of styles, such as display:none )

(innerText is affected by CSS style and will trigger rearrangement… That is, it will be slower than textcontent.)

 How to add text to tags (two ways)

div.innerText = 'nice to meet you'

The disadvantage of this method is that it will empty your elements, such as the ones in your DivyouAfter adding, your original span and content are gone

div.appendChild(document.createTextNode('nice to meet you'))

Generate a new node so that the original content is not affected

 

 

2. Methods(if an attribute is a function, it is also called a method, in other words, a method is a function property)

.appendChild( )

. clonenode() / / Note.cloneNode(true)Deep copy, the copy is exactly the same as the original;.cloneNode( )For shallow copy, only attributes and tags are cloned, and its child nodes are not cloned

.contains( )

.hasChildNodes( )

.insertBefore( )

. isequalnode() / / equal but not the same, for example, var a = 1; VAR B = 1, then a and B are equal but not the same

. issamenode() / / same, same

. removechild() / / is only removed from the page, but still exists in memory

. replacechild() / / for example, if div1 is replaced with div2, div1 is still in memory

.normalize( )//Routinization

 

 

Document interface

Reference link: https://developer.mozilla.org/zh-CN/docs/Web/API/Document

 

attribute

Anchors / / has been discarded

body

characterSet

childElementCount

children

doctype

documentElement

domain

fullscreen

head

hidden

images

links

location

onxxxxx

origin

plugins

readyState

Referer / / for example, where do you jump to this page? By setting, you can improve the security

……

 

 

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]