「路安笔记04」JS DOM/牛客刷题/菜鸟/疑问:DOM加载完成会覆盖

华为OD机试语言选择有JS,想着应该还是搞前端,视频看过一点看不下去,直接刷题来吧。

JS41 dom 节点查找:HTML DOM Document 对象 | 菜鸟教程

parent1.contains(oNode2)包含此节点(加深了英语单词的记忆....),let parent1 = oNode1.parentNode;获取父节点(JS的函数感觉和英语关系还挺大)

dom 文档对象模型(Document Object Model)

  1. var x=document.getElementById("intro"); DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
  2. var y=x.getElementsByTagName("p"); 查找 id="main" 元素中的所有

    元素,getElementByClassName是查找类名

  3. document.write() 可用于直接向 HTML 输出流写内容。
  4. document.getElementById("p1").innerHTML="新文本!";/另一种写法:var element=document.getElementById("header");element.innerHTML="新标题";
  5. document.getElementById("image").src="landscape.jpg";/src为attribute改变元素属性
  6. document.getElementById("p2").style.fontFamily(property:color/fontSize)="Arial";改变元素样式
  7. 点击就把对应id元素的颜色改变,感觉也可以应用与检索到到关键字的文档标亮关键字,还可以触发事件:页面加载完成,输入框被修改等。
  8. 点击文本!

    改变H1文本内容,还可以在script内定义函数来改变,function changetext(id){id.innerHTML="Ooops!";},

    点击文本!

  9. 向 button 元素分配 onclick 事件:,可以做个小组件用于全屏看不到时间点击下或者快捷键 document.getElementById("myBtn").onclick=function(){displayDate()};

拓展

  1. 绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。为什么?
  2. HTML 事件的例子:
  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时


const readline = require("readline");
//create interface for reading data
const rl=readline.createInterface({
    input : process.stdin,
    output : process.stdout
});
  
rl.on("line",function(line){
    const num=parseFloat(line);
  //make input into floating point number
   
    console.log(parseInt(num+0.5))
  //javascript has the method Math.round for the problem "round"
});
const readline = require("readline");//HJ9
//双引号单引号好像没有差别
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
 
});
 
rl.on('line',
      function (line) {
//line变成字符串然后用""分开再转置
var tokens = line.toString().split("").reverse();
    //设置从数组中删除重复元素,这个是真不懂啥原理了,但是和我思路很想除了这个去重复
var set = [...new Set(tokens)];
    //输出一个字符串数组,用Number一样,join让字符一个个输出
console.log(parseInt(set.join("")));
});
const readline = require('readline');//hJ46
const rl = readline.createInterface({
    input:process.stdin,
    output:process.stdout
});
let arr = [];
rl.on('line',(line) => {
    arr.push(line)//获取数据,每行为一个数组
})
rl.on('close',()=>{
    console.log(arr[0].slice(0,arr[1]))
    //分割第一行arr[0],从开头到第二行获得数组arr[1]中的数据,不包含arr[1]值
})
const readline = require("readline");//HJ58
const rl=readline.createInterface({
input:process.stdin,
output:process.stdout
});
let arr = [];
rl.on('line',(line)=>{
arr.push(line);
})
rl.on('close',()=>{
let arr1=arr[0].split(' ');//将数组根据空格分开
let arr2=arr[1].split(' ').sort((a,b)=>a-b);
//=>为函数表达式,整个sort内为箭头函数,a-b代表升序
//(a,b)=> { return a-b },ab为数组中任意两个数
//当返回值大于0时,a放在b的后面;当返回值等于0时,ab位置不改变。
let res =arr2.slice(0,arr1[1]).join(' ');//arr1写成arr
console.log(res);
})
发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章