JavaScript基础-07-DOM


1. 四种节点的属性:

 2. var btu=document.getElementById('btu');  //获取button对象的ID

btu.innerHTML="I'm a buttom";   //修改HTML内的文字

3. 事件:用户和浏览器之间的交互行为,比如,点击按钮,鼠标移动.....

可以在事件对应的属性中设置一些js代码,当事件被触发时,这些代码会被执行。

W3c中JS>HTML DOM>DOM参考>DOM Event

var btn=document.getElementById('btu');
//为按钮的对应事件绑定处理函数的形式来响应事件,当事件被触发时就会执行
//绑定一个单击事件
btn.onclick=function () {
alert("不用点???")}

4. 浏览器在加载一个页面时,是按照自上而下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上面,在代码执行时,页面还没有加载

将JS代码写到页面的下部就是为了可以在页面加载完毕以后再执行Js代码

<script>

window.onload=function(){  ///利用这种方法可以写在前面!!页面加载完毕之后,立即执行
   var btn=document.getElementById('btu');
   btu.onclick=function(){
      alert("不用点???")
   }};

</script>

<body>
   <button id="btu">一个小小小小按钮</button>
</body>

5.

代码:

如果读取元素节点属性,直接使用元素.属性名
例子: 元素.id  元素.name  元素.value
注意:class属性不能采用这种方式,可以使用  元素.className

<script>
   var btn01=document.getElementById("btn01");
   btn01.onclick=function(){
      //查找#bj节点
      var bj=document.getElementById("bj");
      //打印bj
      //通过innerHTML获取元素内部的html代码
      alert(bj.innerHTML);};
   var btn02=document.getElementById("btn02");
   btn02.onclick=function(){
      //查找li节点,封装到数组中
      var lis=document.getElementsByName("li");
      // alert(lis.length);
      for(var i=0;i<lis.length;i++){
         alert(lis[i].innerHTML)}}
   var btn03=document.getElementById("btn03");
   btn03.onclick=function () {
      //查找name=gender的所有节点
      var inputs=document.getElementsByName("gender");
      // alert(inputs.length);
      for(var i=0;i<inputs.length;i++){
//innerHTML用于获取元素内部的HTML代码,但是Input没有内部,对于单标签没有意义
   //读取元素的属性
         alert(inputs[i].value)}};
</script>

6. DOM查询的剩余方法:

//获取body标签
    var body=document.body;
    //获取html根标签
    var html=document.documentElement;
    //已弃用
    var all=document.all;
//根据元素的class属性值查询一组元素节点对象,IE9以上才支持
    var box1=document.getElementsByClassName("box1")

7. JS与CSS交互

//在css中利用.box1 div
/*document.querySelector()
需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象*/
var div=document.querySelector(".box1 div");
console.log(div);

//虽然IE8中没有getElementsByClassName( ),但可以利用querySelector( )代替

//使用querySelector( )方法总会返回唯一个元素,如果满足条件的元素有多个,那么它只会返回第一个
var box=document.querySelector(".box1")

//使用querySelectorAll( )方法会返回所有class相同的div,返回数组

var box2=document.querySelectorAll(".box1");
console.log(box2.length);

(0)

相关推荐

  • 1+x 证书 Web 前端开发初级实操考试(试卷 6 )

    一.单选题共 30 题,60 分 1. 阅读下面的 JavaScript 代码,输出结果是() B function f(y) { var x=y*y; return x; } for(x=0;x&l ...

  • [周汇总] 前端面试每日3+1(周汇总2019.05.19)

    <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受! 学习不打 ...

  • 深入浅出浏览器渲染原理

    目录 前言 页面加载过程 浏览器渲染过程 1)浏览器会解析三个东西: 2)解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree. 3)最后 ...

  • 冷门的HTML - tabindex 的作用

    HTML 的 tabindex 属性开发过程中一般不会使用到,最近开发中有个需求兼顾富交互,便总结了一下.本篇文章同时收录在我的[前端知识点]中,Github链接直达,欢迎 Star 按照惯例,放上官 ...

  • 前端性能优化清单,超详细,一篇文章足矣,建议看完(1)

    前端性能优化清单,超详细,一篇文章足矣,建议看完(1) 沐晨枫语2021-02-02 22:49:36 当我们去面试的时候,很大概率会被面试官问这么一个问题:你有尝试过对项目做性能优化吗?或者你了解哪 ...

  • 全栈必备JavaScript基础

    1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业.在今年RedMonk 推出的2017 年第一季度编程语言排行榜中,JavaScript 排第一,Java 第二,Python 反超 ...

  • 八字命理基础——07名词术语续7

    提纲 月柱就是提纲,是八字的要害地方.有的人叫它堤纲,比如冲堤运,就是指大运干支与月令干支天克地冲,那步运即是冲堤运. 第一,提纲能决定所有其它天干的原始状态. 例 乾造:癸亥 癸亥 壬寅 甲辰 月柱 ...

  • 小马哥-2020零基础JavaScript基础入门全套教程

    ┃  ┃  ┃  ┣━12-44 hasOwnProperty方法.mp4 ┃  ┃  ┃  ┣━9-5 作用域变量查找的机制(重要).mp4( i+ @) s# M6 w% S, w; M ┃  ┃ ...

  • JavaScript基础

    一 JavaScript 简介1 JavaScript基本介绍1 JavaScript 简称JS,是一种动态的弱类型脚本解释型语言,和HTML,CSS并成为三大WEB核心技术,得到了几乎所有主流浏览器 ...

  • Nice!JavaScript基础语法知识都在这儿了

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star ⭐⭐⭐⭐⭐转载请注明出处!⭐⭐⭐⭐⭐ 链接:https:/ ...

  • JavaScript基础知识点总结

    //逗比小憨憨 /*第一章 *HTML引用js方法: *1,外部引用:HTML外部引用js:<script src='js/day1.js'></script> *2,内部引用 ...

  • JavaScript基础ES5/ES6常用数组方法汇总

    一.Array数组常用方法 1.栈方法(先进后出) push():在数组的最后一项后追加值(参数:可以为多个值或数组) 返回:数组的长度,改变了原数组 var a=[1,2,3] a.push(9); ...

  • JavaScript基础总结(一)

    值类型(基本类型):字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined).Symbol.注:Symbol 是 ES6 引入了一种新的原始 ...

  • 「学习笔记」JavaScript基础

    前言 最近一直在跟着黑马教程学习JavaScript内容,遂把这一阶段的学习内容整理成笔记,巩固所学知识,同时也会参考一些博客,书籍上的内容,查漏补缺,给自己充充电