als-document 1.0.5-alpha → 1.0.7-alpha

package/index.mjs

@@ -21,13 +21,13 @@ function buildStyle(attributes){
   const styles=attributes.style || "";
    con
 class NodeClassList{
   constructor(node){ this.node=node }
   get classes(){ return (this.node.attributes.class || "").split(" ").filter(Boolean) }
   set classes(val){ this.node.attributes.class=val.join(" ") }
   contains(className){ return this.classes.includes(className) }
    add(className){
      const currentClasses=this.classes;
      if (!currentClasses.includes(className)) this.classes=[...currentClasses,className];
   }
    remove(className){ this.classes=this.classes.filter(cls=>cls!==className); }
    toggle(className){
      if (this.classes.includes(className)) this.remove(className);
      else this.add(className);
   }
    replace(oldClass,newClass){
      if (this.classes.includes(oldClass)){
         this.remove(oldClass);
         this.add(newClass);
      }
   }
 }
 function insertBefore(arr,index,newItem){
   const existingIndex=arr.indexOf(newItem);
   if (existingIndex!==-1) arr.splice(existingIndex,1);
   arr.splice(index,0,newItem);
-}
  class Node{
   constructor(tagName,attributes={},parent=null){
      this.isSingle=false;
      this.tagName=tagName;
      this.attributes=attributes;
      this.childNodes=[];
      if (parent!==null) parent.childNodes.push(this)
      this.parent=parent;
      this._classList=null;
      this.__style=null;
      this._dataset=null
   }
    get id(){ return this.attributes.id ? this.attributes.id : null; }
   set id(newValue){ this.attributes.id=newValue; }
   get className(){return this.attributes.class || null}
   get parentNode(){ return this.parent }
   get ancestors(){
      if(!this.parent) return []
      const ancestors=[]
      let element=this.parent
      while (element.tagName!=='ROOT'){
         ancestors.push(element)
         element=element.parent
      }
      return ancestors.reverse()
   }
    get childNodeIndex(){
      if(!this.parent) return null
      return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null
   }
    get childIndex(){
      if(!this.parent) return null
      return this.parent.children ? this.parent.children.indexOf(this) : null
   }
   get previousElementSibling(){ return this.prev }
   get prev(){
      if (!this.childIndex) return null
      return this.parent.children[this.childIndex-1]
   }
    get nextElementSibling(){ return this.next }
   get next(){
      if (!this.childIndex) return null
      return this.parent.children[this.childIndex+1] || null
   }
    get dataset(){
      if (!this._dataset) this._dataset=getDataset(this);
      return this._dataset;
   }
    get classList(){
      if (!this._classList) this._classList=new NodeClassList(this);
      return this._classList;
   }
    get style(){
      if (!this.__style) this.__style=buildStyle(this.attributes)
      return this.__style
   }
    get outerHTML(){
      const attrs=Object.entries(this.attributes).map(([key,val])=>`${key}="${val}"`).join(" ");
      return `<${this.tagName}${attrs ? ' '+attrs : ''}>${this.innerHTML}</${this.tagName}>`;
   }
    getAttribute(attrName){ return this.attributes[attrName] || null }
   setAttribute(attrName,value){ this.attributes[attrName]=value }
   removeAttribute(attrName){ delete this.attributes[attrName] }
    remove(){
      if (!this.parent) return
      const index=this.childIndex;
      if (index!==null) this.parent.childNodes.splice(index,1);
   }
    get innerHTML(){
      return this.childNodes.map(child=>{
         if (child instanceof Node || child instanceof SingleNode) return child.outerHTML;
         else if (child instanceof TextNode) return child.textContent;
         else return child
      }).join("");
   }
    $$(query){return this.querySelectorAll(query)}
   querySelectorAll(query){
      const selectors=Query.get(query)
      return find(selectors,this,new Set())
   }
   $(query){return this.querySelector(query)}
   querySelector(query){
      const selectors=Query.get(query)
      return find(selectors,this,new Set(),true)[0] || null
   }
    getElementsByClassName(query){ return this.querySelectorAll('.'+query) }
   getElementsByTagName(query){ return this.querySelectorAll(query) }
   getElementById(query){ return this.querySelector('#'+query) }
    get children(){
      return this.childNodes.filter(child=>{
         if (!(child instanceof Node)) return false
         if (child.tagName==='#comment') return false
         return true
      });
   }
    insertAdjacentElement(position,newElement){
      if(newElement.tagName==='ROOT' && newElement.childNodes.length>0) newElement=newElement.childNodes[0]
      const pos=position.toLowerCase();
      if (pos==="afterbegin") this.childNodes.unshift(newElement);
      else if (pos==="beforeend") this.childNodes.push(newElement);
      newElement.parent=this
      if (!this.parent) return newElement
      if (pos==="beforebegin") insertBefore(this.parent.childNodes,this.childNodeIndex,newElement)
      else if (pos==="afterend") this.parent.childNodes.splice(this.childNodeIndex+1,0,newElement);
      newElement.parent=this.parent
      return newElement
   }
    insertAdjacentHTML(position,html){
      const newNode=parseHTML(html);
      newNode.childNodes.reverse().forEach(node=>{
         this.insertAdjacentElement(position,node);
      });
      return newNode
   }
    insertAdjacentText(position,text){
      return this.insertAdjacentElement(position,new TextNode(text));
   }
    set innerHTML(html){
      const parsed=parseHTML(html);
      this.childNodes=parsed.childNodes;
   }
    set outerHTML(html){
      const parsed=parseHTML(html);
      if (!this.parent) return console.log('element has no parent node')
      const index=this.childIndex
      if (index!==null) this.parent.childNodes.splice(index,1,...parsed.childNodes);
   }
    appendChild(newChild){
      if (newChild instanceof Node || newChild instanceof TextNode || newChild instanceof SingleNode){
         if (newChild.parent) newChild.parent.childNodes=newChild.parent.childNodes.filter(child=>child!==newChild);
      } else if(typeof newChild==='string') newChild=new TextNode(newChild)
      else return newChild
      this.childNodes.push(newChild);
      newChild.parent=this;
      return newChild;
   }
    get textContent(){
      if (this.childNodes.length===0) return this.nodeName==='#text' ? this.nodeValue : '';
      return this.childNodes.map(child=>{
         if(child instanceof SingleNode) return ''
         if(child instanceof TextNode) return child.nodeValue
         if(child instanceof Node) return child.textContent;
         else return child;
      }).join(" ");
   }
    set textContent(value){
      this.childNodes=[];
      if (value!==null && value!==undefined){
         this.childNodes.push(value.toString());
      }
   }
+}
  class Node{
   constructor(tagName,attributes={},parent=null){
      this.isSingle=false;
      this.tagName=tagName;
      this.attributes=attributes;
      this.childNodes=[];
      if (parent!==null) parent.childNodes.push(this)
      this.parent=parent;
      this._classList=null;
      this.__style=null;
      this._dataset=null
   }
    get id(){ return this.attributes.id ? this.attributes.id : null; }
   set id(newValue){ this.attributes.id=newValue; }
   get className(){return this.attributes.class || null}
   get parentNode(){ return this.parent }
   get ancestors(){
      if(!this.parent) return []
      const ancestors=[]
      let element=this.parent
      while (element.tagName!=='ROOT'){
         ancestors.push(element)
         element=element.parent
      }
      return ancestors.reverse()
   }
    get childNodeIndex(){
      if(!this.parent) return null
      return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null
   }
    get childIndex(){
      if(!this.parent) return null
      return this.parent.children ? this.parent.children.indexOf(this) : null
   }
   get previousElementSibling(){ return this.prev }
   get prev(){
      if (!this.childIndex) return null
      return this.parent.children[this.childIndex-1]
   }
    get nextElementSibling(){ return this.next }
   get next(){
      if (!this.childIndex) return null
      return this.parent.children[this.childIndex+1] || null
   }
    get dataset(){
      if (!this._dataset) this._dataset=getDataset(this);
      return this._dataset;
   }
    get classList(){
      if (!this._classList) this._classList=new NodeClassList(this);
      return this._classList;
   }
    get style(){
      if (!this.__style) this.__style=buildStyle(this.attributes)
      return this.__style
   }
    get outerHTML(){
      const attrs=Object.entries(this.attributes).map(([key,val])=>`${key}="${val}"`).join(" ");
      return `<${this.tagName}${attrs ? ' '+attrs : ''}>${this.innerHTML}</${this.tagName}>`;
   }
    getAttribute(attrName){ return this.attributes[attrName] || null }
   setAttribute(attrName,value){ this.attributes[attrName]=value }
   removeAttribute(attrName){ delete this.attributes[attrName] }
    remove(){
      if (!this.parent) return
      const index=this.childNodeIndex;
      if (index!==null) this.parent.childNodes.splice(index,1);
   }
    get innerHTML(){
      return this.childNodes.map(child=>{
         if (child instanceof Node || child instanceof SingleNode) return child.outerHTML;
         else if (child instanceof TextNode) return child.textContent;
         else return child
      }).join("");
   }
    $$(query){return this.querySelectorAll(query)}
   querySelectorAll(query){
      const selectors=Query.get(query)
      return find(selectors,this,new Set())
   }
   $(query){return this.querySelector(query)}
   querySelector(query){
      const selectors=Query.get(query)
      return find(selectors,this,new Set(),true)[0] || null
   }
    getElementsByClassName(query){ return this.querySelectorAll('.'+query) }
   getElementsByTagName(query){ return this.querySelectorAll(query) }
   getElementById(query){ return this.querySelector('#'+query) }
    get children(){
      return this.childNodes.filter(child=>{
         if (!(child instanceof Node)) return false
         if (child.tagName==='#comment') return false
         return true
      });
   }
    insertAdjacentElement(position,newElement){
      if(newElement.tagName==='ROOT' && newElement.childNodes.length>0) newElement=newElement.childNodes[0]
      const pos=position.toLowerCase();
      if (pos==="afterbegin") this.childNodes.unshift(newElement);
      else if (pos==="beforeend") this.childNodes.push(newElement);
      newElement.parent=this
      if (!this.parent) return newElement
      if (pos==="beforebegin") insertBefore(this.parent.childNodes,this.childNodeIndex,newElement)
      else if (pos==="afterend") this.parent.childNodes.splice(this.childNodeIndex+1,0,newElement);
      newElement.parent=this.parent
      return newElement
   }
    insertAdjacentHTML(position,html){
      const newNode=parseHTML(html);
      newNode.childNodes.reverse().forEach(node=>{
         this.insertAdjacentElement(position,node);
      });
      return newNode
   }
    insertAdjacentText(position,text){
      return this.insertAdjacentElement(position,new TextNode(text));
   }
    set innerHTML(html){
      const parsed=parseHTML(html);
      this.childNodes=parsed.childNodes;
   }
    set outerHTML(html){
      const parsed=parseHTML(html);
      if (!this.parent) return console.log('element has no parent node')
      const index=this.childIndex
      if (index!==null) this.parent.childNodes.splice(index,1,...parsed.childNodes);
   }
    appendChild(newChild){
      if (newChild instanceof Node || newChild instanceof TextNode || newChild instanceof SingleNode){
         if (newChild.parent) newChild.parent.childNodes=newChild.parent.childNodes.filter(child=>child!==newChild);
      } else if(typeof newChild==='string') newChild=new TextNode(newChild)
      else return newChild
      this.childNodes.push(newChild);
      newChild.parent=this;
      return newChild;
   }
    get textContent(){
      if (this.childNodes.length===0) return this.nodeName==='#text' ? this.nodeValue : '';
      return this.childNodes.map(child=>{
         if(child instanceof SingleNode) return ''
         if(child instanceof TextNode) return child.nodeValue
         if(child instanceof Node) return child.textContent;
         else return child;
      }).join(" ");
   }
    set textContent(value){
      this.childNodes=[];
      if (value!==null && value!==undefined){
         this.childNodes.push(value.toString());
      }
   }
 }
 class SingleNode extends Node{
   constructor(tagName,attributes={},parent=null){
      if(attributes['?'] && tagName==='?xml') delete attributes['?']
      super(tagName,attributes,parent);
      this.isSingle=true
   }
    get outerHTML(){
      if (this.tagName==="#cdata-section") return `<![CDATA[${this.nodeValue}]]>`;
      const attrs=Object.entries(this.attributes).map(([key,val])=>`${key}="${val}"`).join(" ");
      return `<${this.tagName} ${attrs}${this.tagName==='?xml' ? '?' : ''}>`;
   }
    get innerHTML(){ return ""; }
   set innerHTML(_){ }
   $(_){return null}
   $$(_){return []}
   querySelectorAll(_){ return []; }
   querySelector(_){ return null; }
   getElementsByClassName(_){ return []; }
   getElementsByTagName(_){ return []; }
   getElementById(_){ return null; }
   get children(){ return []; }
   insertAdjacentElement(_,__){ }
   insertAdjacentHTML(_,__){ }
   insertAdjacentText(_,__){ }
   appendChild(_){ }
   get textContent(){ return ""; }
   set textContent(_){ }
 }
 function parseAttributes(str){
   const attrs={};
   let key="";
   let value="";
   let isKey=true;
   let quoteChar=null;
    for (let i=0; i< str.length; i++){
      const char=str[i];
       if (isKey && (char==='=' || char===' ')){
         if (char==='=') isKey=false;
         else if (key.trim()){
            attrs[key.trim()]=true;
            key="";
         }
         continue;
      }
       if (!quoteChar && (char==='"' || char==="'")){
         quoteChar=char;
         continue;
      } else if (quoteChar && char===quoteChar){
         quoteChar=null;
         attrs[key.trim()]=value.trim();
         key=""; value=""; isKey=true;
         continue;
      }
       if (isKey) key+=char;
      else value+=char;
   }
    if (key.trim() &&!value) attrs[key.trim()]=true;
   return attrs;
 }
 const VOID_TAGS=new Set(["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr","!doctype",'?xml']);
-function parseHTML(html){
   const root=new Node("ROOT");
   const stack=[root];
   let currentText="",i=0;
   let max=0
    function parseScript(){
      if (!html.startsWith("<script",i)) return false;
      const openTagEnd=html.indexOf(">",i);
      if (openTagEnd===-1) return false;
       const attributesString=html.substring(i+7,openTagEnd).trim();
      const attributes=parseAttributes(attributesString);
       let closeTagStart=html.indexOf("</script>",openTagEnd);
      if (closeTagStart===-1) return false;
      const content=html.substring(openTagEnd+1,closeTagStart);
       const scriptNode=new Node('script',attributes,stack[stack.length-1]);
      if(content.length>0) scriptNode.childNodes.push(content);
         i=closeTagStart+9;
      return true;
   }
    function parseSpecial(startStr,endStr,n1,n2,tag){
      if (!html.startsWith(startStr,i)) return false
      const end=html.indexOf(endStr,i+n1);
      const strNode=new Node(tag,{},stack[stack.length-1]);
      strNode.childNodes.push(html.substring(i+n1,end));
      i=end+n2;
      return true
   }
    while (i< html.length){
      if(i>=max) max=i;
      else break;
      if (parseScript()) continue
      if (parseSpecial("<!--","-->",4,3,'#comment')) continue
      if (parseSpecial("<style","</style>",7,8,'style')) continue
       if (html.startsWith("<![CDATA[",i)){
         const end=html.indexOf("]]>",i+9);
         if (end===-1) break;
         const content=html.substring(i+9,end);
         const cdataNode=new SingleNode("#cdata-section",{},stack[stack.length-1]);
         cdataNode.nodeValue=content;
         i=end+3;
         continue;
      }
       if (html.startsWith("<",i)){
         if (currentText && stack[stack.length-1]){
            stack[stack.length-1].childNodes.push(new TextNode(currentText));
            currentText="";
         }
          let tagEnd=i+1;
         let insideQuotes=false;
         let quoteChar=null;
          while (tagEnd< html.length){
            const char=html[tagEnd];
            if (!insideQuotes && (char==='"' || char==="'")){
               insideQuotes=true;
               quoteChar=char;
            } else if (insideQuotes && char===quoteChar){
               insideQuotes=false;
               quoteChar=null;
            }
             if (!insideQuotes && char==='>') break;
            tagEnd++;
         }
          const tagContent=html.substring(i+1,tagEnd);
         if (tagContent.startsWith("/")) stack.pop();
         else{
            let isSelfClosing=tagContent.endsWith('/');
            const tagNameEnd=tagContent.search(/\s|>|\//);
            const tagName=tagContent.substring(0,tagNameEnd>0 ? tagNameEnd : tagEnd-i-1);
            const attributesString=tagContent.substring(tagName.length,isSelfClosing ? tagContent.length-1 : tagContent.length).trim();
            const attributes=parseAttributes(attributesString);
            if (VOID_TAGS.has(tagName.toLowerCase()) || isSelfClosing) new SingleNode(tagName,attributes,stack[stack.length-1])
            else stack.push(new Node(tagName,attributes,stack[stack.length-1]));
         }
         i=tagEnd+1;
      } else{
         currentText+=html[i];
         i++;
      }
   }
   if (currentText.trim() && stack[stack.length-1]) stack[stack.length-1].childNodes.push(new TextNode(currentText));
   return root;
+function parseHTML(html){
   const root=new Node("ROOT");
   const stack=[root];
   let currentText="",i=0;
   let max=0
    function parseScript(){
      if (!html.startsWith("<script",i)) return false;
      const openTagEnd=html.indexOf(">",i);
      if (openTagEnd===-1) return false;
       const attributesString=html.substring(i+7,openTagEnd).trim();
      const attributes=parseAttributes(attributesString);
       let closeTagStart=html.indexOf("</script>",openTagEnd);
      if (closeTagStart===-1) return false;
      const content=html.substring(openTagEnd+1,closeTagStart);
       const scriptNode=new Node('script',attributes,stack[stack.length-1]);
      if(content.length>0) scriptNode.childNodes.push(content);
         i=closeTagStart+9;
      return true;
   }
    function parseSpecial(startStr,endStr,n1,n2,tag){
      if (!html.startsWith(startStr,i)) return false
      const end=html.indexOf(endStr,i+n1);
      const strNode=new Node(tag,{},stack[stack.length-1]);
      strNode.childNodes.push(html.substring(i+n1,end));
      i=end+n2;
      return true
   }
    while (i< html.length){
      if(i>=max) max=i;
      else break;
      if (parseScript()) continue
      if (parseSpecial("<!--","-->",4,3,'#comment')) continue
      if (parseSpecial("<style","</style>",7,8,'style')) continue
       if (html.startsWith("<![CDATA[",i)){
         const end=html.indexOf("]]>",i+9);
         if (end===-1) break;
         const content=html.substring(i+9,end);
         const cdataNode=new SingleNode("#cdata-section",{},stack[stack.length-1]);
         cdataNode.nodeValue=content;
         i=end+3;
         continue;
      }
       if (html.startsWith("<",i)){
         if (currentText && stack[stack.length-1]){
            const textNode=new TextNode(currentText)
            stack[stack.length-1].childNodes.push(textNode);
            textNode.parent=stack[stack.length-1]
            currentText="";
         }
          let tagEnd=i+1;
         let insideQuotes=false;
         let quoteChar=null;
          while (tagEnd< html.length){
            const char=html[tagEnd];
            if (!insideQuotes && (char==='"' || char==="'")){
               insideQuotes=true;
               quoteChar=char;
            } else if (insideQuotes && char===quoteChar){
               insideQuotes=false;
               quoteChar=null;
            }
             if (!insideQuotes && char==='>') break;
            tagEnd++;
         }
          const tagContent=html.substring(i+1,tagEnd);
         if (tagContent.startsWith("/")) stack.pop();
         else{
            let isSelfClosing=tagContent.endsWith('/');
            const tagNameEnd=tagContent.search(/\s|>|\//);
            const tagName=tagContent.substring(0,tagNameEnd>0 ? tagNameEnd : tagEnd-i-1);
            const attributesString=tagContent.substring(tagName.length,isSelfClosing ? tagContent.length-1 : tagContent.length).trim();
            const attributes=parseAttributes(attributesString);
            if (VOID_TAGS.has(tagName.toLowerCase()) || isSelfClosing) new SingleNode(tagName,attributes,stack[stack.length-1])
            else stack.push(new Node(tagName,attributes,stack[stack.length-1]));
         }
         i=tagEnd+1;
      } else{
         currentText+=html[i];
         i++;
      }
   }
   if (currentText.trim() && stack[stack.length-1]) stack[stack.length-1].childNodes.push(new TextNode(currentText));
   return root;
 }
 export default { parseHTML, Node, Query, TextNode, SingleNode }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-document",
-  "version": "1.0.5-alpha",
+  "version": "1.0.7-alpha",
   "description": "A powerful HTML parser & DOM manipulation library for both backend and frontend.",
   "main": "index.js",
   "module": "index.mjs",

package/src/node/node.js

@@ -79,7 +79,7 @@ class Node {
 
    remove() {
       if (!this.parent) return
-      const index = this.childIndex;
+      const index = this.childNodeIndex;
       if (index !== null) this.parent.childNodes.splice(index, 1);
    }
 

package/src/parse/parser.js

@@ -52,7 +52,9 @@ function parseHTML(html) {
 
       if (html.startsWith("<", i)) {
          if (currentText && stack[stack.length - 1]) {
-            stack[stack.length - 1].childNodes.push(new TextNode(currentText));
+            const textNode = new TextNode(currentText)
+            stack[stack.length - 1].childNodes.push(textNode);
+            textNode.parent = stack[stack.length - 1]
             currentText = "";
          }
 

package/tests/index.html

@@ -6,8 +6,8 @@
    <title>Document</title>
    <script src="/node_modules/als-simple-test/test.js"></script>
    <script src="../document.js"></script>
-   <script src="./data/html1.js"></script>
-   <!-- <script src="./data/html2.js"></script> -->
+   <!-- <script src="./data/html1.js"></script> -->
+   <script src="./data/html2.js"></script>
    <script src="./data/svg.js"></script>
    <script>
       const { parseHTML, Node, Query, TextNode, SingleNode } = alsDocument

package/tests/parse-real.js

@@ -32,8 +32,9 @@ describe('Real data html1', async () => {
    it('Text nodes check', () => {
       const realParagraph = iframe.querySelector('p');
       const parsedParagraph = parsedHTML.querySelector('p');
-      const real = realParagraph.textContent.trim().replace(/\n\s*/gm,'')
-      const parsed = parsedParagraph.textContent.trim()
+      const real = realParagraph.textContent.trim().replace(/\n|\s/gm,'')
+      const parsed = parsedParagraph.textContent.trim().replace(/\n|\s/gm,'')
+      console.log({parsed,real})
       assert(real === parsed, 'Text contents are the same');
    });