欢迎光临
我的个人博客网站

JavaScript基础-07-DOM

DOM-文档对象模型


 

 JavaScript基础-07-DOMJavaScript基础-07-DOM

 

1. 四种节点的属性:

 

 JavaScript基础-07-DOM

 

 

 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. 

JavaScript基础-07-DOM

 

 代码:

如果读取元素节点属性,直接使用元素.属性名
例子: 元素.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) 打赏
未经允许不得转载:张拓的天空 » JavaScript基础-07-DOM
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏