day13-DOM操作，属性操作与事件

最新推荐文章于 2023-04-25 21:34:04 发布

t17246

最新推荐文章于 2023-04-25 21:34:04 发布

阅读量141

点赞数

文章标签： javascript html safari

本文链接：https://blog.csdn.net/t17246/article/details/123238868

版权

1模拟文档树结构

2 获取元素的方式

1）根据id获取元素

var div1 = document.getElementById("box1");

2）通过类名获取元素

var p1Arr = document.getElementsByClassName("p1");

伪数组定义：

1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
2、不具有数组所具有的方法

伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组

3）通过标签名获取元素

var tag1 = document.getElementsByTagName("div");

4）通过name名获取元素

var userList = document.getElementsByName("user");

5）通过选择器的querySelector获取元素

querySlector():获取指定选择器的第一个元素，参数就是选择器的名称

var div1 = document.querySelector(".box1");

6）通过选择器的querySelectorAll获取元素

var boxList = document.querySelectorAll(".box1");

4事件

(1)、事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

(2)、事件的基本使用

<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
</script>
鼠标单击事件：onclick    浏览器加载完成事件：onload

(3)、事件触发的多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

补充：绑定事件的是事件对象

触发事件的是事件源对象

5 非表单元素的属性操作：href、title、id、src、className width height等等

1）添加src属性值显示图片

imgBox.src = "images/jie.jpg";

2）改变图片大小

imgBox.width = 750;

imgBox.height = 500;

3）通过style改变宽高

imgBox.style.width = 750 + "px";

imgBox.style.height = 500 + "px";

//通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

4）通过类名改变宽度

imgBox.className = "imgCl";

//className 会覆盖之前设置好的类名！

5）隐藏元素

1、src=""

2、display=none; 不占位置的

3、visibility="hidden

this
1. 普通函数中，this指向window
  1. 构造函数中，this指向实例化对象
  2. 对象函数中，this指向当前的对象
  3. 事件函数中，this指向事件源

表单元素属性操作

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性checked 复选框选中属性

selected 下拉菜单选中属性

checked

8 InnerText

返回被选元素的文本内容
 var p1 = document.getElementById("p1");
  console.log(p1.innerText);
设置被选元素的文本内容
btn1.onclick = function () {
    // 设置文本
    p1.innerText = "文本改变了哈";
    console.log(p1.innerText);
  }

属性操作与事件

1隔行换色

<body>
    <ul>
        <li >111</li>
        <li >222</li>
        <li >333</li>
        <li >444</li>
        <li >555</li>
        <li >666</li>
        <button id="change">换色</button>
      
    </ul>
</body>
</html>
<script>
    
    window.onload =function(){
        
        var lis = document.getElementsByTagName('li');
        for( var i =0; i<lis.length; i++){
            if(i %2 ==0){
                lis[i].style.color = 'red';
            }else{
                lis[i].style.color = 'blue';
            }
        }
    }
</script>

2新事件

鼠标事件

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。

onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

//鼠标移入事件
  box1.onmouseover = function () {
    this.style.fontSize = "26px";
    this.style.height = "60px";
    console.log(111)
  }
  // 鼠标移出事件
  box1.onmouseout = function () {
    this.innerText = "鼠标移出了哈！";
    this.style.height = "30px";
    this.style.fontSize = "16px";
  }

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。

onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发

// 鼠标进入事件
  box2.onmouseenter = function () {
    this.style.borderRadius = "12px";
    this.style.backgroundColor = "blue";
  }
  //鼠标的离开事件
  box2.onmouseleave = function () {
    this.style.borderRadius = "0";
    this.style.backgroundColor = "purple";
  }

onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发

onblur失去焦点事件：在鼠标光标失去焦点时触发。

 //获取焦点事件
  user.onfocus = function () {
    this.style.border = "3px solid red";
    this.style.outline = "0";
  }
  // 失去焦点事件
  user.onblur = function () {
    console.log(this.value);
  }

onclick单击事件：在鼠标指针单击时触发

ondblclick双击事件：在鼠标光标双击时触发。

box1.ondblclick = function () {
    this.style.backgroundColor = "yellow";
  }

2）

、键盘事件

onkeydown：键盘按下

onkeyup:键盘抬起

document.getElementById("user").onkeydown = function () {
    console.log("按下了！！1");
  }
  document.getElementById("user").onkeyup = function () {
    console.log("抬起来了！！1");
    console.log(this.value);
  }

(3)、浏览器事件

onload:浏览器加载完成执行

onscroll:滚动浏览器滚动条时触发

  window.onscroll = function () {
    console.log("滚动了！");

文本内容属性

(1)、innerText和textContent

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持

设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

(2)、innerText和innerHTML的区别

使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的

innerHTML是可以设置文本内容

innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

元素的属性操作

、自定义属性

元素除了本身的属性之外可以设置自定义属性

(2)、获取属性

getAttribute("属性的名字")

getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值

console.log(in1.getAttribute("type"));//text

console.log(in1.getAttribute("name"));//user

console.log(in1.getAttribute("id"));//text1

console.log(in1.getAttribute("style"));//color: red;

(3)、设置属性

setAttribute("属性的名字","属性的值");

元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性

setObj1.onclick = function () {

in1.setAttribute("name", "password");

// in1.setAttribute("class", "");

in1.className = "";

// in1.setAttribute("style", "border:5px dotted pink");

in1.style.border = "5px dotted pink";

console.log(in1.getAttribute("name"));//password

}

、移除属性

removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性

var removeObj = document.getElementById("remove");

removeObj.onclick = function () {

in1.removeAttribute("class");

div1.removeAttribute("name1");

}

元素样式设置的几种方式

能用switch语句实现的就一定可以使用if实现，但是反之不一定，如果是区间范围就采用if，如果是等值判断使用switch

对象.style
对象.className
对象.setAttribute("style")
对象.setAttribute("class")
对象.style.setProperty("CSS属性","CSS属性值")

对象.style.cssText

<body>
  <div class="box1" id="box1"></div>
  <input type="button" value="改变样式" id="change">
</body>
<script>
  var box = document.getElementById("box1");
  var changeBtn = document.getElementById("change");
  changeBtn.onclick = function () {
    // 1、对象.style
    // box.style.backgroundColor = "red";
    // 2、对象.className
    // box.className = "box2";
    // 3、对象.setAttribute("style")
    // box.setAttribute("style", "background-color:red");
    // 4、对象.setAttribute("class")
    // box.setAttribute("class", "box2");
    // 5、对象.style.setProperty("CSS属性","CSS属性值")
    // box.style.setProperty("background-color", "red");
    // 6、对象.style.cssText
    box.style.cssText = "background-color: red;height:80px";
  }
</script>