js编程题练习
笔试编程题，要先手写代码思路，然后用语言加代码实现
<style type="text/css">
#list {background:red;width:100px;height:100px;padding:0;}
li{list-style:none}
#list.red{background:red}/*<ul id="list" class="red"> 筛选同一个元素*/
#list.yellow{background:yellow}
#list.green{background-color:black}
</style>
</head>
<body>
<ul id="list" class="">
<li id="red"></li>
</ul>
<script type="text/javascript">
var oList=document.getElementById('list');
console.log('112')
oList.className="red";
function apromise(t){
return new Promise(function(resolve,reject){
console.log('113')
setTimeout(resolve,t)
})
}
function stat() {
function stat() {
apromise(3000).then(function () {
console.log('115')
oList.className = "yellow";
console.log('116')
return apromise(1000);
}).then(function () {
oList.className = "green";
return apromise(2000);
}).then(function () {
oList.className = "red";
stat();
})
}
stat();
}
stat()
</script>
</body>
</html>
2.实现节点的顺序翻转
<body>
<ul id='target'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!-- <script>
debugger
var ul=document.getElementById('target');
var list =document.getElementsByTagName('li');
// children:只包含元素节点 childNodes: 包含所有类型的节点
可以提取页面上的节点，进行编辑操作。
一次性提取需要的节点，处理后重新插入回去，减少页面重绘
let fragment = document.createDocumentFragment()
fragment 是一个指向空[DocumentFragment]对象的引用。
("DocumentFragment 接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document
使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。")
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[]
数组的末尾。
<div id="app">
<p id="childNode">hello</p>
</div>
<script>
let fragment = document.createDocumentFragment()
let someChild = document.querySelector('#childNode')
let app = document.querySelector('#app')
// ！！注意提取someChild，app里就不存在了
fragment.appendChild(someChild)
// 修改内容
fragment.childNodes[0].textContent = '修改后在插入app'
// 重新插入到app 中
//fragment 可以全部插入，也可以选择部分fragment.childNodes[0]
//插入后后的节点，fragment里便不存在了
app.appendChild(fragment)
</script>
转载于:https://www.jianshu.com/p/e459f0ca1c16
问题：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
原因：appendChild的参数为node节点，导致这样的问题说明当前的参数不是node，有可能是字符串。
</script> -->
<script>
var ul = document.getElementById('target');
var list = ul.getElementsByTagName('li');
var fragment = document.createDocumentFragment();
for (var i = list.length-1; i >= 0; i--) {
console.log(list[i])
fragment.appendChild(list[i]);
}
ul.appendChild(fragment);
</script>
</body>
</html>
//另一种解法：
<script>
var ul = document.getElementById('target');
var list = ul.getElementsByTagName('li');
//转换成数组Array.prototype.slice.call(list
var arrList=Array.prototype.slice.call(list)
arrList.reverse()// reverse():该方法会改变原来的数组,而不会创建新的数组
console.log(arrList)//为数组，里面的元素为一个个object组成（<li></li>）
var str=''
for(var i=0;i<arrList.length;i++){
console.log(arrList[i])//<li></li>...
console.log(typeof arrList[i])//object
console.log(arrList[i].outerHTML)
str+=arrList[i].outerHTML;
//"" innerHTML， innerText传进去和得到的都是字符串
}
console.log(str )
console.log(typeof str)//string
ul.innerHTML=str;
</script>
第三种：
<script>
var ul = document.getElementById('target');
var list = ul.getElementsByTagName('li');
//转换成数组Array.prototype.slice.call(list
var str='';
for(var i=list.length-1;i>=0;i--){
str+=list[i].outerHTML
}
ul.innerHTML=str
</script>
错位原因:innerHTML是属性不是方法，赋值直接=；
思路：1.将每个节点变成字符串并拼接：str+=list[i].outerHTML，然后替换源节点的内容：ul.innerHTML=str
思路：2.将伪数组变成真数组//转换成数组Array.prototype.slice.call(list），调用数组的reverse方法，然后将数组每一项变成字符串拼接str+=arrList[i].outerHTML;，最后用ul.innerHTML=str
3.使用js实现大小写转换
<body>
<!-- //在js中字符串是固定不变的，类似replace()和toUpperCase()的方法都返回新字符串，但原字符串本身并没有发生改变。 -->
<input type="button" name="" value="go" οnclick='a()'>
<br>
请输入字母：<input type="text" id="txt" value="">
<div id="z"></div>
<script>
// debugger
var inputs = document.getElementsByTagName('input');
function a(){
console.log(11)
console.log( typeof inputs[1].value,typeof "string");//string,inputs[1].value.toUpperCase()有问题
var str = inputs[1].value.split('')
console.log( typeof str[1])//'string'
for(var i=0;i<str.length;i++){
// str[i].charCodeAt(0)功能是返回str[i]字符串第0个字符的 Unicode 编码:
if(/[a-z]/.test(str[i])){
if(str[i].charCodeAt(0)>= 'a'.charCodeAt(0) && str[i].charCodeAt(0) <='z'.charCodeAt(0)){
str[i] = str[i].toUpperCase();
}
} else {
str[i] = str[i].toLowerCase();
console.log(1111, typeof str[i], str);
}
}
var str1= str.join('')
console.log(11, str1);
}
</script>
</body>
js字符串大小写转换
<script>
// 错误做法一
var inputs = document.getElementsByTagName('input');
// function a(){
// console.log(11)
// console.log( typeof inputs[1].value,typeof "string");//string,inputs[1].value.toUpperCase()有问题
// var str = inputs[1].value
// //$1.toUpperCase()').replace(/([A-Z])/g, '$1.toLowerCase()'
// var str1=str.replace(/([a-z])/g,function(value){
// console.log(value)//value仅为匹配到的值
// return value.toUpperCase()
// })//此时都变成大写了
// console.log(11, str1);
// var str2 = str1.replace(/([A-Z])/g, function (value) {
// console.log(value)
// return value.toLowerCase()
// })
// console.log(11, str2);
// }
//正确做法
function a() {
console.log(11)
console.log(typeof inputs[1].value, typeof "string");//string,inputs[1].value.toUpperCase()有问题
var str = inputs[1].value
//$1.toUpperCase()').replace(/([A-Z])/g, '$1.toLowerCase()'
var str1 = str.replace(/([a-zA-Z])/g, function (value) {
if(value.toUpperCase()!=value){
return value.toUpperCase()
}else{
return value.toLowerCase()
}
})//此时都变成大写了
}
</script>