Using CasperJS 1.1 with the following codes, I'm able to fetch useful DOM html from web page.
casper.each(c.getElementsInfo(xpath), function(casper, element, j) {
var html = element["html"].trim();
if(html.indexOf('Phone') > -1) {
// what should I put here?
}
});
However, I want to access & obtain the child elements of the element. How can I achieve this? Element's HTML source (a.k.a the value of html) is as follow:
Loop 1
<div class="fields">
Phone
</div>
<div class="values">
12345678 (Mr. Lee) </div>
Loop 2
<div class="fields">
Emergency Phone
</div>
<div class="values">
23456789 (Emergency)
</div>
Loop 3
<div class="fields">
Opening Hours
</div>
<div class="values">
9:00am-6:30pm(Weekday) /
Close on Sundays and Public Holidays（Can be booked）(Holiday)
</div>
Loop 4
<div class="fields">
Last Update
</div>
<div class="values">
11/06/14 </div>
The above HTML is badly formatted, and contains a lot of whitespaces.
The data I wanted to fetch is:
Phone: 12345678
Emergency Phone: 23456789 (Emergency)
Opening Hours: 9:00am-6:30pm(Weekday) / Close on Sundays and Public Holidays（Can be booked）(Holiday)
Last Update: 11/06/14
Tried RegEx, but the RegEx is too complicated.
I don't recommend doing this with regular expressions. It can be easily done with some selectors, but it has to be done in the page context (inside of the evaluate() callback), because DOM nodes cannot be passed to the outside.
CasperJS provides a helper function for matching DOM nodes by XPath with __utils__.getElementsByXPath() through the ClientUtils module that is always automatically inserted. The result of that function is an array, so the normal forEach() pattern applies. DOM nodes can be used as context nodes for selecting child elements with el.querySelector(".class").
var info = casper.evaluate(function(xpath){
var obj = {};
__utils__.getElementsByXPath(xpath).forEach(function(el){
obj[el.querySelector(".fields").textContent.trim()] =
el.querySelector(".values").textContent.trim();
});
return obj;
}, yourXPathString);
If you want to select elements based on a CSS selector use the following:
var info = casper.evaluate(function(cssSelector){
var obj = {};
__utils__.findAll(cssSelector).forEach(function(el){
obj[el.querySelector(".fields").textContent.trim()] =
el.querySelector(".values").textContent.trim();
});
return obj;
}, yourCssSelector);
Related
I have the following text:
If there would be more <div>matches<div>in</div> string</div>, you will merge them to one
How do I make a JS regex that will produce the following text?
If there would be more <div>matches in string</div>, you will merge them to one
As you can see, the additional <div> tag has been removed.
I would use a DOMParser to parseFromString into the more fluent HTMLDocument interface to solve this problem. You are not going to solve it well with regex.
const htmlDocument = new DOMParser().parseFromString("this <div>has <div>nested</div> divs</div>");
htmlDocument.body.childNodes; // NodeList(2): [ #text, div ]
From there, the algorithm depends on exactly what you want to do. Solving the problem exactly as you described to us isn't too tricky: recursively walk the DOM tree; remember whether you've seen a tag yet; if so, exclude the node and merge its children into the parent's children.
In code:
const simpleExampleHtml = `<div>Hello, this is <p>a paragraph</p> and <div>some <div><div><div>very deeply</div></div> nested</div> divs</div> that should be eliminated</div>`
// Parse into an HTML document
const doc = new DOMParser().parseFromString(exampleHtml, "text/html").body;
// Process a node, removing any tags that have already been seen
const processNode = (node, seenTags = []) => {
// If this is a text node, return it
if (node.nodeName === "#text") {
return node.cloneNode()
}
// If this node has been seen, return its children
if (seenTags.includes(node.tagName)) {
// flatMap flattens, in case the same node is repeatedly nested
// note that this is a newer JS feature and lacks IE11 support: https://caniuse.com/?search=flatMap
return Array.from(node.childNodes).flatMap(child => processNode(child, seenTags))
}
// If this node has not been seen, process its children and return it
const newChildren = Array.from(node.childNodes).flatMap(child => processNode(child, [...seenTags, node.tagName]))
// Clone the node so we don't mutate the original
const newNode = node.cloneNode()
// We can't directly assign to node.childNodes - append every child instead
newChildren.forEach(child => newNode.appendChild(child))
return newNode
}
// resultBody is an HTML <body> Node with the desired result as its childNodes
const resultBody = processNode(doc);
const resultText = resultBody.innerHTML
// <div>Hello, this is <p>a paragraph</p> and some very deeply nested divs that should be eliminated</div>
But make sure you know EXACTLY what you want to do!
There's lots of potential complications you could face with data that's more complex than your example. Here are some examples where the simple approach may not give you the desired result.
<!-- nodes where nested identical children are meaningful -->
<ul>
<li>Nested list below</li>
<li>
<ul>
<li>Nested list item</li>
</ul>
</li>
</ul>
<!-- nested nodes with classes or IDs -->
<span>A span with <span class="some-class">nested spans <span id="DeeplyNested" class="another-class>with classes and IDs</span></span></span>
<!-- places where divs are essential to the layout -->
<div class="form-container">
<form>
<div class="form-row">
<label for="username">Username</label>
<input type="text" name="username" />
</div>
<div class="form-row"
<label for="password">Password</label>
<input type="text" name="password" />
</div>
</form>
</div>
Simple approach without using Regex by using p element of html and get its first div content as innerText(exclude any html tags) and affect it to p, finally get content but this time with innerHTML:
let text = 'If there would be more <div>mathces <div>in</div> string</div>, you will merge them to one';
const p = document.createElement('p');
p.innerHTML = text;
p.querySelector('div').innerText = p.querySelector('div').innerText;
console.log(p.innerHTML);
This is my first question at stack overflow
i just wanted to know a simple solution for the following case
<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
<p>
<span style="font-size:1.75em">{{d.date | date:'dd'}}</span>
<br>
<strong> {{d.date | date:'EEE'}}</strong>
</p>
</div>
the looped div can have the same id
I just want to display the first div with a particular date and ignore the rest
can this be achieved with CSS or JavaScript
You can't use the same id on two elements. It's one of the few restrictions on ids.
You can use a class:
<div class="show">Yes</div> <div class="show">No</div>
...and then show either the first or second by using index 0 or index 1 after getting a list of matching elements:
var list = document.querySelectorAll(".show");
list[0].style.display = "none"; // Hides the first one
// or
list[1].style.display = "none"; // Hides the second one
Some other thoughts:
1. Rather than using style.display as I did above, you might add a class that hides the element.
2. You might use separate ids (or classes) for the elements so you don't need to index, e.g.:
<div id="show-yes">Yes</div> <div id="show-no">No</div>
then
document.getElementById("show-yes").style.display = "none";
// or
document.getElementById("show-no").style.display = "none";
On all browsers in my experience, you can do the first thing above (with querySelectorAll) with your invalid HTML with a selector like "[id=show], but don't. Fix the HTML instead.
In your question update, you show:
<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
...
You've said you're aware of the fact you can't have multiple elements with the same id, so why code that? You can easily give them unique ids:
<div *ngFor="let d of w.event; let i = index">
<div class="date" id="d.date{{i}}" >
...
First of all, in HTML ID is a unique selector so one ID can be associate with only one element. if you want to achieve your desired functionality you have to assign different id for both DIV. and use javascript to hide and show DIV
<div id="showYes">Yes</div> <div id="showNo">No</div>
If you want to show one at a time you can go with *ngIf , as it will show only one at a time
<div id="show" *ngIf='your_status'>Yes</div>
<div id="show" *ngIf='!your_status'>No</div>
After your question update , you can create custom filter that will only return unique date , so only first unique date will be shown
// CREATE A PIPE FILTER :
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({name: 'checkUniqueDate'})
export class UniqueDatePipe implements PipeTransform {
transform(dataArray) {
let dates = [];
return dataArray.filter(data => {
return if(dates.indexOf(data.date) === -1) {
dates.push(data.date);
return true;
} else {
return false;
}
});
}
}
// TEMPLATE SIDE :
<div *ngFor="let d of (w.event | checkUniqueDate )">
Add the date in class also, then you can try below code
.YOUR_DATE{
display:none
}
.YOUR_DATE:first-child{
displany:inline
}
I have a bunch of Custom Elements that begin with 'food-cta-'. I am looking for a way in JavaScript/jQuery to be able to select these elements. This is similar to how I can use $('*[class^="food-cta-"]') to select all the classes that start with food-cta-. Is it possible to do a search for elements that start with 'food-cta-'?
Note that I will be injecting this search onto the page, so I won't have access to Angular.
Example of Custom Elements:
<food-cta-download>
<food-cta-external>
<food-cta-internal>
EDIT: The code I am looking at looks like:
<food-cta-download type="primary" description="Download Recipe">
<img src="">
<h2></h2>
<p></p>
</food-cta-download>
The app uses AngularJS to create Custom Elements which I believe is called Directives.
You can use XPath with the expression
//*[starts-with(name(),'food-cta-')]
Where
//* is wildcard for all nodes
starts-with() is a XPath function to test a string starts with some value
name() gets the QName (node name)
and 'food-cta-' is the search term
Pass it into document.evaluate and you will get a XPathResult that will give you the nodes that were matched.
var result = document.evaluate( "//*[starts-with(name(),'food-cta-')]", document, null, XPathResult.ANY_TYPE, null );
Note you can use any node as the root, you do not need to use document. So you could for instance replace document with the some div:
var container = document.getElementById("#container");
var result = document.evaluate( "//*[starts-with(name(),'food-cta-')]", container, null, XPathResult.ANY_TYPE, null );
Demo
let result = document.evaluate( "//*[starts-with(name(),'food-cta-')]", document, null, XPathResult.ANY_TYPE, null );
let nodes = [];
let anode = null;
while( (anode = result.iterateNext()) ){
nodes.push( anode.nodeName );
}
console.log(nodes);
<div id="container">
<br>
<food-cta-download type="primary" description="Download Recipe">
<img src="">
<h2></h2>
<p></p>
</food-cta-download>
<span>Some span</span>
<food-cta-something>
<img src="">
<h2></h2>
<p></p>
</food-cta-something>
<div>In between
<food-cta-sub>
<img src="">
<h2></h2>
<p></p>
</food-cta-sub>
</div>
<food-cta-hello>
<img src="">
</food-cta-hello>
<food-cta-whattt>
</food-cta-whattt>
</div>
Try this..
let customElements = $('*')
.filter((index,element) => /FOOD-CTI-/.test(element.tagName));
Note, .tagName should return the result in uppercase. This should get you a jQuery object of the elements you want. It will traverse the entire DOM though. It'll be slow.
This uses the "all selector".
Caution: The all, or universal, selector is extremely slow, except when used by itself.
You can traverse less then entire dom too, by specifying something like $("body *"). Not sure where you have put the Custom Elements, and where they're allowed.
As an aside, I wouldn't use Custom Elements, microformats are a better idea at least now, they're also better supported, and they're less likely to change.
You probably have to just go to the elements in question and check if their tagName begins with that given string...
var myPrefix = "mycustom-thing-";
$("body").children().each(function() {
if (this.tagName.substr(0, myPrefix.length).toLowerCase() == myPrefix) {
console.log(this.innerHTML); // or what ever
}
})
https://jsfiddle.net/svArtist/duLo2d0z/
EDIT: Included for efficiency's sake:
If you can predict where the elements will be, you can of course specify that circumstance.
In my example, the elements in question were direct children of body - so I could use .children() to get them. This would not traverse lower levels.
Reduce the need for traversal by the following:
Start on the lowest needed level ($("#specific-id") rather than $("body"))
If the elements are all to be found as direct children of a container:
Use $.children() on the container to obtain just the immediate children
Else
Use $.find("*")
If you can tell something about the containing context, filter by that
For example $("#specific-id").find(".certain-container-class .child-class *")
Why not extend jquery selectors?
$(':tag(^=food-cta-)')
Would be possible with the following implementation:
$.expr[':'].tag = function tag(element, index, match) {
// prepare dummy attribute
// avoid string processing when possible by using element.localName
// instead of element.tagName.toLowerCase()
tag.$.attr('data-tag', element.localName || element.tagName.toLowerCase());
// in :tag(`pattern`), match[3] = `pattern`
var pattern = tag.re.exec(match[3]);
// [data-tag`m`="`pattern`"]
var selector = '[data-tag' + (pattern[1] || '') + '="' + pattern[2] + '"]';
// test if custom tag selector matches element
// using dummy attribute polyfill
return tag.$.is(selector);
};
// dummy element to run attribute selectors on
$.expr[':'].tag.$ = $('<div/>');
// cache RegExp for parsing ":tag(m=pattern)"
$.expr[':'].tag.re = /^(?:([~\|\^\$\*])?=)?(.*)$/;
// some tests
console.log('^=food-cta-', $(':tag(^=food-cta-)').toArray());
console.log('*=cta-s', $(':tag(*=cta-s)').toArray());
console.log('food-cta-hello', $(':tag(food-cta-hello)').toArray());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<br>
<food-cta-download type="primary" description="Download Recipe">
<img src="">
<h2></h2>
<p></p>
</food-cta-download>
<span>Some span</span>
<food-cta-something>
<img src="">
<h2></h2>
<p></p>
</food-cta-something>
<div>In between
<food-cta-sub>
<img src="">
<h2></h2>
<p></p>
</food-cta-sub>
</div>
<food-cta-hello>
<img src="">
</food-cta-hello>
<food-cta-whattt>
</food-cta-whattt>
</div>
This supports a pseudo-CSS-style attribute selector with the syntax:
:tag(m=pattern)
Or just
:tag(pattern)
where m is ~,|,^,$,* and pattern is your tag selector.
I have an array of tasks. They have titles and and labels.
function Task(taskTitle, taskType) {
this.title = taskTitle;
this.type = taskType;
}
$scope.tasks = [];
I end up declaring a bunch of tasks with different types and adding them to the array
In my html, I show a column of cards, filtered by type of task:
<div ng-model="tasks">
<div class="card" ng-repeat="abc in tasks track by $index" ng-show="abc.type==0">
<p> {{ abc.title }} </p>
</div>
</div>
I want to bind the first card displayed in this filtered view to some other div. I'll be processing an inbox, so I'll whittle this list of cards down to zero. Each time I 'process' a card and remove it from the list, I need the data to refresh.
<div ng-model="firstCardInFilteredArray">
<h4>Title of first card:</h4>
<p> This should be the title of the first card! </p>
</div>
My intuition was to do something like this (in javascript):
// pseudo-code!
$scope.inboxTasks = [];
for (i=0; i<tasks.length(); i++) {
if (tasks[i].type == 0) {
inboxTasks.append(tasks[i]);
}
}
and somehow run that function again any time the page changes. But that seems ridiculous, and not within the spirit of Angular.
Is there a simple way in pure javascript or with Angular that I can accomplish this conditional binding?
You can filter your ng-repeat: https://docs.angularjs.org/api/ng/filter/filter
<div ng-model="tasks">
<div class="card" ng-repeat="abc in filteredData = (tasks | filter: {type==0}) track by $index">
<p> {{ abc.title }} </p>
</div>
</div>
Additionally, by saving the filtered data in a separate list you can display the next task like this:
<div>
<h4>Title of first card:</h4>
<p> filteredData[0].title </p>
</div>
Your data will automatically update as you "process" tasks.
The other answers helped point me in the right direction, but here's how I got it to work:
HTML
<input ng-model="inboxEditTitle" />
JS
$scope.filteredArray = [];
$scope.$watch('tasks',function(){
$scope.filteredArray = filterFilter($scope.tasks, {type:0});
$scope.inboxEditTitle = $scope.filteredArray[0].title;
},true); // the 'true' keyword is the kicker
Setting the third argument of $watch to true means that any changes to any data in my tasks array triggers the watch function. This is what's known as an equality watch, which is apparently more computationally intensive, but is what I need.
This SO question and answer has helpful commentary on a similar problem, and a great fiddle as well.
More on different $watch functionality in Angular
To update inboxTasks, you could use $watchCollection:
$scope.inboxTasks = [];
$scope.$watchCollection('tasks', function(newTasks, oldTasks)
{
for (i=0; i<newTasks.length(); i++)
{
if(newTasks[i].type == 0)
{
$scope.inboxTasks.append(tasks[i]);
}
}
});
I have a javascript function which gets some values from ajax. From javascript I add that values to a div whose display is by default none. In my function from ajax i also gets an array of values. My task is to make a list on html inside my div based on the array values.
Can anyone help me to do this..
Javascript function:
function showpopup(id)
{
var advid=id;
$.ajax
({
type:"post",
url:"ajax_getadv.php?function=getadv",
data:{id:advid},
cache:false,
success:function(data){
var values=data;
var myarray=values.split("/");
var name=myarray[0];
var email=myarray[1];
var country=myarray[2];
var web=myarray[3];
var advid=myarray[4];
var count=myarray[5];
var val=myarray[6]
var mytitle=val.split(",");
document.getElementById("advname").innerHTML = name;
document.getElementById("advid").innerHTML = advid;
document.getElementById("email1").innerHTML = email;
if(country!="")
{
document.getElementById("country").innerHTML = country;
}
else
{
document.getElementById("country").innerHTML = "Not Available";
}
if(web!="")
{
document.getElementById("website").innerHTML = web;
}
else
{
document.getElementById("website").innerHTML = "Not Available";
}
var generateHere = document.getElementById("newlist");
var mycount=mytitle.length;
alert(mycount);
for( var i = 0 ; i < mycount ; i++)
{
generateHere.innerHTML = '<div class="someclass"><ul><li>My Text</li></ul></div>';
}
}
});
document.getElementById('box-config-modal1').style.display='block';
}
Here mytitle is the array which i want to display as list. I've put a for loop to create a list in the div. I have to show mytitle rather than My text.
HTML div:
<!--SHOW MODAL 1-->
<div id="box-config-modal1" class="modal hide fade in" style="display: none;">
<div class="box" id="box-details">
<h4 class="box-header round-top">Details</h4>
<div class="box-container-toggle" style="padding-left:20px;padding-right:20px;">
<div class="box-content" >
<form name="popup" id="popup" >
<fieldset>
<button class="close" data-dismiss="modal"></button>
<h3>User Details</h3>
<div class="control-group">
<div class="controls"> <label class="control-label" for="typeahead" style="width:100px;float:left;" >Name </label><label id="advname" style="padding-left:150px;"></label></div>
</div>
<div class="control-group">
<div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;" >ID </label><label id="advid" style="padding-left:150px;"></label></div>
</div>
<div class="control-group">
<div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Email </label><label id="email1" style="padding-left:150px;"></label></div>
</div>
<div class="control-group">
<div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Country </label><label id="country" style="padding-left:150px;"></label ></div>
</div>
<div class="control-group">
<div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Website </label><label id="website" style="padding-left:150px;"></label ></div>
</div>
<div class="" id="newlist">
</div>
<div class="modal-footer">
Exit
</div>
</fieldset>
</form>
</div>
</div>
</div>
It is in this div i want to create a list. I've added a new div with id newlist
There are a couple of options becoming available in w3 drafts and standards these days and into the future.. webcomponents and shadowDOM specifically..
until those become widely adopted standards..
You can look to building DOM elements in Javascript HtmlDOMElement and than attach it to the document body in 1 assignment to the actual DOM.
function showpopup(id)
{
var advid=id,
options = {
type:"post",
url:"ajax_getadv.php?function=getadv",
data:{id:advid},
cache:false,
success: OnSuccess
};
$.ajax(options);
}
Helper Function
function createControlGroup(options) {
var options = options || {};
options.id = options.id || "ukn-"+Date.now();
options.for = options.for || options.id;
options.displayText = options.displayText || "NotSet";
options.displayValue = options.displayValue || "Unknown";
var cntrlGrpElm = document.createElement("div"),
cntrlElms = document.createElement("div"),
cntrlLabel1 = document.createElement("label"),
cntrlLabel2 = document.createElement("label");
var cntrlGrpElmClass=document.createAttribute("class"),
cntrlElmsClass=document.createAttribute("class"),
cntrlLabel1Class=document.createAttribute("class");
cntrlGrpElmClassAttr.nodeValue="control-group";
cntrlGrpElm.attributes.setNamedItem(cntrlGrpElmClassAttr);
cntrlElmsClass.nodeValue="controls";
cntrlElms.attributes.setNamedItem(cntrlElmsClass);
cntrlLabel1Class.nodeValue="control-label";
cntrlLabel1.attributes.setNamedItem(cntrlLabel1Class);
var cntrlLabel2Id=document.createAttribute("id");
cntrlLabel2Id.nodeValue=options.id;
cntrlLabel2.attributes.setNamedItem(cntrlLabel2Id);
var cntrlLabel1For=document.createAttribute("for");
cntrlLabel1For=options.for;
cntrlLabel1.attributes.setNamedItem(cntrlLabel1For);
var cntrlLabel1Text = document.createTextNode(options.displayText),
cntrlLabel2Text = document.createTextNode(options.displayValue);
cntrlLabel1.appendChild(cntrlLabel1Text);
cntrlLabel2.appendChild(cntrlLabel2Text);
cntrlElms.appendChild(cntrlLabel1);
cntrlElms.appendChild(cntrlLabel2);
cntrlGrpElm.appendChild(cntrlElms);
return cntrlGrpElm;
}
OnSuccess Callback Function
function OnSuccess(e) {
var values=e.responseText;
var myarray=values.split("/");
var name=myarray[0],
email=myarray[1],
country=myarray[2],
web=myarray[3],
advid=myarray[4],
count=myarray[5],
val=myarray[6];
var mytitle=val.split(",");
var title1=mytitle[0],
title2=mytitle[1],
title3=mytitle[2];
use the helper function to create and return the DOMElement, we're passing an ambiguous object here.
var cntrlGrpElms = document.createElement("fieldset");
var cntrlGrpElmsClass = document.createAttribute("class");
cntrlGrpElmsClass.nodeValue = "contrl-group-list";
cntrlGrpElms.attributes.setNamedItem(cntrlGrpElmsClass);
cntrlGrpElms.appendChild(createControlGroup({"id":"item-1","displayText":"Item 1", "displayValue":"Value of Item 1"}));
cntrlGrpElms.appendChild(createControlGroup({"id":"item-2","displayText":"Item 2", "displayValue":"Value of Item 2"}));
cntrlGrpElms.appendChild(createControlGroup({"id":"item-3","displayText":"Item 3", "displayValue":"Value of Item 3"}));
cntrlGrpElms.appendChild(createControlGroup({"id":"item-4","displayText":"Item 4", "displayValue":"Value of Item 4"}));
This is sample data.. You would, of course, use your data, and structure: I just mimicked the elements with the fieldset tag, excluding the button and div.modal-footer. CSS will pick up on the changes, so I didn't see any point in specifying the styles.
At this point, we tapper this function off by adding the DOMElement (and the children) in the document.body.
document.body.appendChild(cntrlGrpElms);
} /* End of - $.ajax - 'OnSuccess' Callback*/
This should really make the process clearer for you. But I don't know exactly how you intended to structure the list. The HTML structure you provided seems more like a control panel.
Also, I want to explicitly point out that your callback function (which you were defining anonymously in your code sample) was handling the eventArg improperly.. so I'm not sure if that was the underline issue you were having or not. If it was, you aside from the documentation, you should use the browser debugger to investigate these matters... F12 will usually invoke the developer console.. depending on the browser, you'll need to set breakpoints on the source (not html dom window.. the 'sources' or external files).. then you can invoke the 'showpopup(id)' function in the console.. it should pause at the breakpoint.. then you can either use the console to evaluate the 'e' eventArg within the scope of the function.. or you can add the 'e' object to the watch expressions' panel.. this is all standard debugger interfacing.. modern web browsers have sure given us developers a great tool to improve and explore the web with.
the event returned is a jqXHR (XmlHttpRequest).. the documentation on it is here
On a complete side note: It is likely that this jqXHR object will change (or at least these documents) in the near future (extended really)..
there are two newer prevalent dataTypes supported by XHR2 now, blob and arraybuffer.. 'bson' (Binary json) is, I think, considered a blob type, but it really has sort of a mixed medium, string and byte data.. so I'm not entirely sure about it.. I know Newtonsoft.json supports it with serialization on the .Net framework already.
You can find more information about XHR2 (which is XHR Level 1 now) and blob, arraybuffer support by googling it..
The Jan 2012 w3.org documentation is here. (when it was still level-2.. and stayed at for pretty darn long)
The newest release spec was in Jan 2014 w3.org: here
But XHR is a Living Standard, and a 'snapshot' of the most recent spec can be found here
To write inside an HTML tag, simply use innerHTML as shown below:
function divCall()
{
document.getElementById('myDiv').innerHTML += 'your newly added text';
}
//make sure your div id is myDiv