/* Positional alignment */ justify-content: center; /* 居中排列 */ justify-content: start; /* Pack items from the start */ justify-content: end; /* Pack items from the end */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end; /* 从行尾位置开始排列 */ justify-content: left; /* Pack items from the left */ justify-content: right; /* Pack items from the right */
/* Baseline alignment */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline;
let divs=document.getElementsByTagName("div"); for(let i=0,len=divs.length;i<len;i++){ let div=doocument.createElement("div"); document.body.appendChild(div); }//避免导致无穷循环
let observer=new MutationObserver(()=>console.log('<body> attributes changed')); observer.observe(document.body,{attributes:true}); document.body.className='foo'; console.log('Changed body class'); //Changed body class //<body> attributes changed
let firstChild=someNode.childNodes[0]; let secondChild=someNode.childNodes.item(1); let count=someNode.childNodes.length; let arrayofNodes=Array.from(someNode.childNodes);
let images=document.getElementsByTagName("img"); alert(images.length);//图片数量 alert(images[0].src);//第一张图片的src属性 alert(images.item(0).src); //通过name属性获得引用 <imgsrc="myImage.gif"name="myImage">; let myImage=images.namedItem("myImage"); //images["myImage"] //取得文档的所有元素 let allElements=document.getElementsByTagName("*");
getElementsByName():返回具有给定name属性的所有元素，常用于单选按钮
1 2 3 4 5 6 7 8 9 10
<fieldset> <legend>Which color do you prefer?</legend> <ul> <li> <input type="radio" value="red" name="color" id="colorRed"><label for="colorRed">Red</label> </li> <li> <input type="radio" value="blue" name="color" id="colorBlue"><label for="colorBlue">Blue</label> </li> let radios=document.getElementsByName("color");
let element=document.createElement("div"); element.className="message";
let textNode=document.createTextNode("Hello world!"); element.appendChild(textNode); let anotherTextNode=document.createTextNode("Yippee"); element.appendChild(anotherTextNode); document.body.appendChild(element);
规范化文本节点
合并文本节点
1 2 3 4 5 6 7 8 9 10 11
let element=document.createElement("div"); element.className="message"; let textNode=document.createTextNode("Hello World"); element.appendChild(textNode); let anotherTextNode=document.createTextNode("Yippee"); element.appendChild(anotherTextNode); document.body.appendChild(element); alert(element.childNodes.length);//2 element.normalize(); alert(element.childNodes.length);//1 alert(element.firstChild.nodeValue);
拆分文本节点
1 2 3 4 5 6 7 8 9 10
let element=document.createElement("div"); element.className="message"; let textNode=document.createTextNode("Hello World"); element.appendChild(textNode); document.body.appendChild(element); let newNode=element.firstChild.splitText(5); alert(element.fiestChild.nodeValue);//"Hello" alert(newNode.nodeValue);//"world" alert(element.chileNodes.length);//2
<ul id="myList"></ul> let fragment=document.createDocumentFragment(); let ul=document.getElementById("myList"); for(let i=0;i<3;i++){ let li=document.createElement("li"); li.appendChild(document.createTextNode(`Item ${i+1}`)); fragment.appendChild(li); } ul.appendChild(fragment);
Attr类型
属性是存在于元素attributes属性中的节点
nodeType=2
nodeName值为属性名
nodeValue值为属性值
parentNode值为null
Attr对象上3个属性
name包含属性名
value包含属性值
specified是一个布尔值，表示属性使用的是默认值和还是被指定的值
1 2 3 4 5 6 7
let attr=document.createAttribute("align");//创建新的Attr节点，参数为属性名 attr.value="left"; element.setAttributeNode(attr);//添加属性节点 alert(element.attributes["align"].value);//返回对应属性节点 alert(element.getAttributeNode("align").value);//返回对应属性节点 alert(element.getAttribute("align"));//只返回属性值
</form> <scriptsrc="example3.js"></script> let selectbox=document.forms[0].elements["location"]; functiongetSelectedOptions(selectbox){ let result=newArray(); for(let option of selectbox.options){ if(option.selected){ result.push(option); } } return result; } let selectedOptions=getSelectedOptions(selectbox); let message=""; for(let option of selectedOptions){ message+=`Selected index:${option.index}\n`+`Selected text:${option.text}\n`+`Selected value:${option.value}\n`;
} console.log(message);
添加选项
动态创建选项
1 2 3 4
let newOption=document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value","Option value"); selectbox.appendChild(newOption);
使用Option构造函数创建选项,接收两个参数：text和value，用选择框的add方法添加选项
1 2
let newOption=new Option("Option text","Option value"); selectbox.add(newOption,undefined);//在列表末尾添加选项
let selectbox1=document.getElementById("selLocations1"); let selectbox2=document.getElementById("selLocations2"); selectbox2.appendChild(selectbox1.options[0]);//将选项从第一个选择框移动到另一个选择框
重排选项
1 2 3 4 5 6
let selectbox1=document.getElementById("selLocations1"); let optionToMove=selectbox1.options[1]; selectbox1.insertBefore(optionToMove,selectbox1.options[optionToMove.index-1]);//将要重排的选项移动到它原先位置的前前面 let selectbox1=document.getElementById("selLocations1"); let optionToMove=selectbox1.options[1]; selectbox1.insertBefore(optionToMove,selectbox1.options[optionToMove.index+2]);//将要重排的选项移动到它原先位置的后面一位
<input type="text" size="25" maxlength="50" value="initial value"> //创建多行文本框 <textarearows="25"cols="5">initial value</textarea> //用使用value属性读写文本框 let textbox=document.forms[0].elements["textbox1"]; textbox.value="Some new value";
选择文本
select()用于全选文本
1 2 3 4 5 6
let form=document.getElementById("myForm"); let textbox=form.elements[0]; textbox.addEventListener("focus",(event)=>{ event.target.select(); console.log(`Text selected:${textbox.value}`); });
setSelectionRange()用于部分选择文本
1 2 3 4 5 6 7
let form=document.getElementById("myForm"); let textbox=form.elements[0]; textbox.addEventListener("focus",(event)=>{ event.target.select(); textbox.setSelectionRange(0,1); console.log(`Text selected:${textbox.value}`); });
</form> let inputIds=["textTel1","textTel2","textTel3"]; for(let id of inputIds){ let textbox=document.getElementById(id); textbox.addEventListener("keyup",(event)=>{ let target=event.target; if(target.value.length==target.maxLength){ let form=target.form; for(let i=0,len=form.elements.length;i<len;i++){ if(form.elements[i]==target){ if(form.elements[i+1]){ form.elements[i+1].focus(); } return; } } } }); };
let form=document.getElementById("myForm"); form.addEventListener("submit",(event)=>{ let target=event.target; //取得提交按钮 let btn=target.elements["submit-btn"]; //禁用提交按钮 btn.disabled=true; })
let getQueryStringArgs=function(){ //取得没有开头问号的查询字符串 let qs=(location.search.length>0)?location.search.substring(1):""; let args={}; for(let item of(qs.split('&').map(kv=>kv.split('=')))){ let name=item[0]; value=item[1]; if(name.length){ args[name]=value; } } return args; } //qs="?q=javaScript&num=10"; let args=getQueryStringArgs(); alert(args["q"]); alert(args['num']);
使用USLSearchParams检查和修改查询字符串
1 2 3 4 5 6 7 8 9 10 11 12
let qs="?q=javaScript&num=10"; let searchParams=new URLSearchParams(qs); alert(searchParams.toString()); searchParams.has("num"); searchParams.get("num"); searchParams.set("page","3"); alert(searchParams.toString()); searchParams.delete("q"); alert(searchParams.toString()); for(let param of searchParams){ console.log(param); }