-
-
Save O330oei/590d041eb39690e126fac5e8e59984ad to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*.js eol=lf | |
*.jsx eol=lf | |
*.json eol=lf |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Mutation Observers</title> | |
<meta name="viewport" content="width=device-width"> | |
<link rel="stylesheet" href="../video-pages/main.css"> | |
</head> | |
<body> | |
<header> | |
<h1>Mutation Observers</h1> | |
</header> | |
<main> | |
<p title="mouseover text"><![CDATA[ this is some characterData ]]>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, quam eos provident sapiente culpa corrupti, deleniti inventore, omnis recusandae repudiandae quasi soluta repellat, expedita suscipit id tenetur excepturi corporis quis.</p> | |
<p>Praesentium ut voluptatem corrupti itaque eveniet necessitatibus tempore cupiditate provident quod voluptas porro qui in, recusandae saepe odit, reiciendis laudantium nulla, nam perferendis nihil dolorum atque est quae. Temporibus, dolorum!</p> | |
<p>Quidem est neque eaque et corrupti magni, doloribus eum. Tempora impedit, veritatis labore accusantium ratione vel. Nesciunt enim quod, beatae quaerat, consectetur sequi veritatis quas dolores ex harum eligendi explicabo!</p> | |
</main> | |
<script> | |
let observer; | |
document.addEventListener('DOMContentLoaded', init); | |
function init(){ | |
let p = document.querySelector('main > p'); //1st p | |
p.addEventListener('click', change); | |
let config = { | |
attributes: true, | |
attributeOldValue: true, | |
attributeFilter: ['data-thing', 'title', 'style'], | |
childList: false, | |
subtree: false, | |
characterData: false, | |
characterDataOldValue: false | |
}; | |
/* childList, attributes, characterData */ | |
observer = new MutationObserver(mutated); | |
observer.observe(p, config); | |
} | |
function change(ev){ | |
let p = ev.currentTarget; | |
p.textContent = ' this is new content'; | |
p.setAttribute('data-thing', 123); | |
p.title = 'NEW TITLE' | |
let span = document.createElement('span'); | |
span.textContent = ' SOME SPAN TEXT'; | |
p.appendChild(span); | |
} | |
function mutated(mutationList){ | |
console.log( mutationList ); | |
for(let mutation of mutationList) { | |
if (mutation.type == 'childList') { | |
console.log('A child node has been added or removed.'); | |
} | |
else if (mutation.type == 'attributes') { | |
console.log('The ' + mutation.attributeName + ' attribute was modified.'); | |
console.log( mutation.oldValue ); | |
} | |
} | |
//observer.takeRecords(); | |
observer.disconnect(); | |
//target - Element | |
//addNodes - NodeList | |
//removedNodes - NodeList | |
//oldValue | |
//attributeName | |
//attributeNamespace | |
//nextSibling - Element / textNode | |
//previousSibling - Element / textNode | |
//type 'attributes' or 'childList' | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
git add . git commit -m
"Added .gitattributes to repo" git push
The GraphQL schema includes these changes:
PackageType
was addedThe GitHub Packages preview includes these changes:
packageType
was added to object typePackage
The GraphQL schema includes these changes:
deleteDeployment
was added to object typeMutation
DeleteDeploymentInput
was addedDeleteDeploymentPayload
was addedThe GraphQL schema includes these changes:
EnterpriseOrderField
was removedCollectionItemContent
was removedUNMARKED_AS_DUPLICATE_EVENT
was added to enumPullRequestTimelineItemsItemType
DISCONNECTED_EVENT
was added to enumPullRequestTimelineItemsItemType
CONNECTED_EVENT
was added to enumPullRequestTimelineItemsItemType
UnmarkedAsDuplicateEvent
was added to Union typePullRequestTimelineItems
DisconnectedEvent
was added to Union typePullRequestTimelineItems
ConnectedEvent
was added to Union typePullRequestTimelineItems
UNMARKED_AS_DUPLICATE_EVENT
was added to enumIssueTimelineItemsItemType
DISCONNECTED_EVENT
was added to enumIssueTimelineItemsItemType
CONNECTED_EVENT
was added to enumIssueTimelineItemsItemType
UnmarkedAsDuplicateEvent
was added to Union typeIssueTimelineItems
DisconnectedEvent
was added to Union typeIssueTimelineItems
ConnectedEvent
was added to Union typeIssueTimelineItems
SubmitPullRequestReviewInput.pullRequestReviewId
changed type fromID!
toID
pullRequestId
was added to input object typeSubmitPullRequestReviewInput
AddPullRequestReviewCommentInput.pullRequestReviewId
changed type fromID!
toID
pullRequestId
was added to input object typeAddPullRequestReviewCommentInput
originalEnvironment
was added to object typeDeployment
latestEnvironment
was added to object typeDeployment
checksUrl
was added to object typePullRequest
checksResourcePath
was added to object typePullRequest
UnmarkedAsDuplicateEvent
was addedDisconnectedEvent
was addedConnectedEvent
was addedThe Checks preview includes these changes:
STALE
was added to enumCheckConclusionState
SKIPPED
was added to enumCheckConclusionState
The GraphQL schema includes these changes:
DUPLICATE
was added to enumReportedContentClassifiers
deleteBranchOnMerge
was added to object typeRepository
The following changes will be made to the schema:
Sponsorship.maintainer
:maintainer
will be removed. UseSponsorship.sponsorable
instead. Effective 2020-04-01.The GraphQL schema includes these changes:
sponsorable
was added to object typeSponsorship
The GraphQL schema includes these changes:
actor
was added to object typeUpdatePullRequestPayload
actor
was added to object typeUpdateIssuePayload
actor
was added to object typeUnlockLockablePayload
actor
was added to object typeMergePullRequestPayload
actor
was added to object typeLockLockablePayload
orderBy: LabelOrder
added to fieldRepository.labels
orderBy: LabelOrder
added to fieldIssue.labels
orderBy: LabelOrder
added to fieldLabelable.labels
orderBy: LabelOrder
added to fieldPullRequest.labels
LabelOrderField
was addedLabelOrder
was addedThe GraphQL schema includes these changes:
createdAt
was added to object typeRepositoryVulnerabilityAlert
The GraphQL schema includes these changes:
createdAt
was added to object typeSponsorsListing
The following changes will be made to the schema:
Organization.registryPackages
:registryPackages
will be removed. Use thePackageOwner
object instead. Effective 2020-04-01.Organization.registryPackagesForQuery
:registryPackagesForQuery
will be removed. Use thePackageSearch
object instead. Effective 2020-04-01.RegistryPackage.color
:color
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.latestVersion
:latestVersion
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.name
:name
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.nameWithOwner
:nameWithOwner
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.packageFileByGuid
:packageFileByGuid
will be removed. Use thePackage
object. Effective 2020-04-01.RegistryPackage.packageFileBySha256
:packageFileBySha256
will be removed. Use thePackage
object. Effective 2020-04-01.RegistryPackage.packageType
:packageType
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.preReleaseVersions
:preReleaseVersions
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.registryPackageType
:registryPackageType
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.repository
:repository
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.statistics
:statistics
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.tags
:tags
will be removed. Use thePackage
object. Effective 2020-04-01.RegistryPackage.topics
:topics
will be removed. Use thePackage
object. Effective 2020-04-01.RegistryPackage.version
:version
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.versionByPlatform
:versionByPlatform
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.versionBySha256
:versionBySha256
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.versions
:versions
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackage.versionsByMetadatum
:versionsByMetadatum
will be removed. Use thePackage
object instead. Effective 2020-04-01.RegistryPackageDependency.dependencyType
:dependencyType
will be removed. Use thePackageDependency
object instead. Effective 2020-04-01.RegistryPackageDependency.name
:name
will be removed. Use thePackageDependency
object instead. Effective 2020-04-01.RegistryPackageDependency.version
:version
will be removed. Use thePackageDependency
object instead. Effective 2020-04-01.RegistryPackageFile.guid
:guid
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageFile.md5
:md5
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageFile.metadataUrl
:metadataUrl
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageFile.name
:name
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageFile.packageVersion
:packageVersion
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageFile.sha1
:sha1
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageFile.sha256
:sha256
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageFile.size
:size
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageFile.url
:url
will be removed. Use thePackageFile
object instead. Effective 2020-04-01.RegistryPackageOwner.registryPackages
:registryPackages
will be removed. Use thePackageOwner
object instead. Effective 2020-04-01.RegistryPackageSearch.registryPackagesForQuery
:registryPackagesForQuery
will be removed. Use thePackageSearch
object instead. Effective 2020-04-01.RegistryPackageStatistics.downloadsThisMonth
:downloadsThisMonth
will be removed. Use thePackageStatistics
object instead. Effective 2020-04-01.RegistryPackageStatistics.downloadsThisWeek
:downloadsThisWeek
will be removed. Use thePackageStatistics
object instead. Effective 2020-04-01.RegistryPackageStatistics.downloadsThisYear
:downloadsThisYear
will be removed. Use thePackageStatistics
object instead. Effective 2020-04-01.RegistryPackageStatistics.downloadsToday
:downloadsToday
will be removed. Use thePackageStatistics
object instead. Effective 2020-04-01.RegistryPackageStatistics.downloadsTotalCount
:downloadsTotalCount
will be removed. Use thePackageStatistics
object instead. Effective 2020-04-01.RegistryPackageTag.name
:name
will be removed. Use thePackageTag
object instead. Effective 2020-04-01.RegistryPackageTag.version
:version
will be removed. Use thePackageTag
object instead. Effective 2020-04-01.RegistryPackageVersion.deleted
:deleted
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.dependencies
:dependencies
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.fileByName
:fileByName
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.files
:files
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.installationCommand
:installationCommand
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.manifest
:manifest
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.platform
:platform
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.preRelease
:preRelease
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.readme
:readme
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.readmeHtml
:readmeHtml
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.registryPackage
:registryPackage
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.release
:release
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.sha256
:sha256
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.size
:size
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.statistics
:statistics
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.summary
:summary
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.updatedAt
:updatedAt
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.version
:version
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersion.viewerCanEdit
:viewerCanEdit
will be removed. Use thePackageVersion
object instead. Effective 2020-04-01.RegistryPackageVersionStatistics.downloadsThisMonth
:downloadsThisMonth
will be removed. Use thePackageVersionStatistics
object instead. Effective 2020-04-01.RegistryPackageVersionStatistics.downloadsThisWeek
:downloadsThisWeek
will be removed. Use thePackageVersionStatistics
object instead. Effective 2020-04-01.RegistryPackageVersionStatistics.downloadsThisYear
:downloadsThisYear
will be removed. Use thePackageVersionStatistics
object instead. Effective 2020-04-01.RegistryPackageVersionStatistics.downloadsToday
:downloadsToday
will be removed. Use thePackageVersionStatistics
object instead. Effective 2020-04-01.RegistryPackageVersionStatistics.downloadsTotalCount
:downloadsTotalCount
will be removed. Use thePackageVersionStatistics
object instead. Effective 2020-04-01.Repository.registryPackages
:registryPackages
will be removed. Use thePackageOwner
object instead. Effective 2020-04-01.Repository.registryPackagesForQuery
:registryPackagesForQuery
will be removed. Use thePackageSearch
object instead. Effective 2020-04-01.User.registryPackages
:registryPackages
will be removed. Use thePackageOwner
object instead. Effective 2020-04-01.User.registryPackagesForQuery
:registryPackagesForQuery
will be removed. Use thePackageSearch
object instead. Effective 2020-04-01.The GitHub Packages preview includes these changes:
statistics
was added to object typePackageVersion
statistics
was added to object typePackage
PackageStatistics
was addedPackageVersionStatistics
was added