第五周蓝旭培训总结

目录

一、DOM

二、获取元素

三、事件

   1.事件的触发

   2.常用事件类型

   3.事件冒泡

   4.手柄

四、DOM元素属性操作

        1.获取，更改标签内容

        2.非表单元素的属性

        3.style 样式属性操作

---

一、DOM

DOM是文档对象模型，它会把网页文档转换为一个文档对象，当网页被加载时，浏览器会创建HTML页面的文档对象模型，主要功能是处理网页内容。在这个文档对象里，所以的元素呈现出一种层次结构，就是说除了顶级元素html外，其他所有元素都被包含在另外的元素中。

 称为节点树。

DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。

二、获取元素

• document.getElementByTagName()

        返回标签名对应的元素对象的集合，以伪数组的形式存储，顺序是他们在文档中的顺序。操作数据时需要按照操作数组的方法进行。length属性是元素个数

        内部获取的元素是动态增加的。(HTMLCollection)

• document.getElementByName()

        一个文档中的name属性可能不唯一（HTML中的单选按钮的name是相同的），返回值也是一个伪数组，而不是一个元素。(NodeList)

• document.querySelector()

        通过CSS中的选择器去选取第一个符合条件的标签元素，（只选这一个）

• document.querySelectorAll()

        通过CSS中的选择器去选取所有符合条件的标签元素集合。（全部）

<p name="p1" id="text1" class="common">标签1</p>
    <p name="p2" class="common" id="text2">标签2</p>
    <p name="p3" class="common" id="text3">标签3</p>
    <p name="p4" class="common" id="text4">标签4</p>
    <p name="p5" class="common" id="text5">标签5</p>
    <script>
      console.log(document.getElementsByTagName('p'))//动态实现的
      console.log(document.getElementsByName("p1"))
      console.log(document.querySelector("#text1"))
      console.log(document.querySelectorAll(".common"))
    </script>

效果为： 

 HTMLCollection集合存储是动态的，会随着文档改变，但是NodeList集合存储是静态的，取出之后就和文档的改变无关了。

三、事件

   1.事件的触发

        由用户触发，鼠标或键盘事件

        由API生成，指示动画已经完成运行的事件，视频已被暂停

        通过脚本代码触发

        自定义事件+EventTarget.dispatchEvent()方法将自定义事件派发往指定的目标(target);

   2.常用事件类型

onclick	鼠标左键单击
ondbclick	鼠标左键双击触发
onmousedown	鼠标按键按下触发
onmouseup	鼠标按键放开时触发
onmousemove	鼠标在元素上移动触发
onmouseover	鼠标移动到元素上触发
onmouseout	鼠标移出元素边界触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onload/onunload	当用户进入页面时，会触发onload和onunload事件
键盘事件 keydowm keyup keypress	当用户按下键盘上任意键时触发，如果按住不放，会重复触发 当用户释放键盘上的键触发 当用户按下键盘上的字符键时触发
onchange	常用于输入字段的验证

           

<p name="p1" id="text1" class="common" onclick="showMessage1()">标签1</p>
    <p name="p2" class="common" id="text2" ondblclick="showMessage2()">标签2</p>
    <p name="p3" class="common" id="text3" onmousedown="showMessage3()">标签3</p>
    <p name="p4" class="common" id="text4" onmouseup="showMessage4()">标签4</p>
    <p name="p5" class="common" id="text5" onmousemove="showMessage5()">标签5</p>
    <p class="common" id="text6" name="p6" onmouseover="showMessage6()">标签6</p>
<script>
function showMessage1(){
        console.log("鼠标左键单击")
    }
function showMessage2(){
    console.log("鼠标左键双击触发")
}
function showMessage3(){
    console.log("鼠标按键按下触发")
}
function showMessage4(){
    console.log("鼠标移动到元素上移动触发")
}
function showMessage5(){
    console.log("鼠标在元素上触发")
}
function showMessage6(){
    console.log("失去鼠标焦点触发")
}
</script>

输出效果

        3.事件冒泡

        obj.addEventListener(event,function,useCapture)

        type事件类型，function事件处理函数，useCapture是否在捕获(true，由外层元素到内层元素)或冒泡(false，由里层元素到外层元素)阶段执行。

        注意可以一次为元素添加多个事件处理函数，ie9以下不支持。

• 事件流

        捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象。

        目标阶段：到达目标事件位置(事发地),触发事件。

        冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

        当一个父元素和子元素绑定有相同类型的事件处理函数的时候。因为结构上的重叠，事件处理函数可能会依次被触发，触发的顺序取决于事件冒泡和事件捕获在每一个元素上的设置情况。

• 事件冒泡

        当父子元素绑定同一事件类型时，子级元素先触发，父级元素后触发。（自底向上）

• 取消冒泡

        event.stopPropagation()

        event.cancelBubble = true(IE独有)

        在事件处理器函数返回之前，将此属性的值设置为true，亦可阻止事件继续冒泡。

• 事件捕获

        当父子元素绑定同一事件类型时，父级元素先触发，子级元素后触发（自顶向下）

        IE没有事件捕获

• 移除事件处理函数

        removeEventListener()

举例

 <div id="parent">
        <button id="child">单击我！</button>
      </div>
<script>
   var parent = document.getElementById("parent");
var child = document.getElementById("child");

child.addEventListener("click", function(event) {
  alert("子元素上发生了单击事件！");
//   event.stopPropagation(); // 阻止事件继续向上层元素传递
},false);

parent.addEventListener("click", function(event) {
  alert("父元素上发生了单击事件！");
},false);
</script>

输出结果是 

 事件捕获举例

<div id="parent">
        <button id="child">单击我！</button>
      </div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");

parent.addEventListener("click", function(event) {
  alert("父元素上发生了单击事件！");
}, true); // 使用事件捕获模式

child.addEventListener("click", function(event) {
  alert("子元素上发生了单击事件！");
},true);

</script>

输出结果是

 

 

<div id="outer">
        <div id="inner">
          <button id="btn">点击我</button>
        </div>
      </div>
<script>
const outer = document.getElementById("outer");
const inner = document.getElementById("inner");
const btn = document.getElementById("btn");

outer.addEventListener("click", () => {
  console.log("outer clicked");
}, true);

inner.addEventListener("click", () => {
  console.log("inner clicked");
}, true);

btn.addEventListener("click", () => {
  console.log("button clicked");
}, true);

outer.addEventListener("click", () => {
  console.log("outer clicked");
}, false);

inner.addEventListener("click", () => {
  console.log("inner clicked");
}, false);

btn.addEventListener("click", () => {
  console.log("button clicked");
}, false);
</script>

 输出结果是

 

冒泡捕获都存在的情况下：顺序为父元素捕获——目标元素事件1——目标元素事件2——子元素捕获——子元素冒泡——父元素冒泡

注：子元素事件执行前提是事件确实落到了子元素布局区域上，而不是简单的具有嵌套关系

4.手柄

        为了避免重复性的工作，类似于封装了一个类.

var eventUtil = {

/ 添加手柄

     addHandler:function(element,type,handler)   

         if(element.addEventListener){

DOM 2级事件 IE不支持

      element.addEventListener(type,handler,false);

         }else if(element.attachEvent){

       IE事件模型没有捕获阶段，所以直接调用attachEvent方法            element.attachEvent('on'+type,handler);

      }else{

   DOM 0级

              element.onclick === element['onclick']

            element['on'+type] = handler;

         }

     },

      删除手柄

     removeHandler:function(element,type,handler){

         if(element.removeHandler){

              DOM 2级事件

             element.removeHandler(type,handler,false);

         }else if(element.removeEvent){

              IE

            element.removeEvent('on'+type,handler);

         }else{

              DOM 0级

              element.onclick === element['onclick']

             element['on'+type] = null;

         }

     }

 }

 eventUtil.addHandler(btn3,'click',showMessage);

四、DOM元素属性操作

        1.获取，更改标签内容

                element.innerText = (new content);

                element.innerHTML = (new html content);

                element.innerHTML包含html标签，而element.innerText 只包含文本内容。

        2.非表单元素的属性

                给元素属性赋值,等号右侧的赋值都是字符串格式。

                element.href=" "

        3.style 样式属性操作

                element.style.property=new style;

 <p name="p1" id="text1" class="common" onclick="showMessage1()">标签1</p>
<script>
var test = document.getElementById("text1")
test.innerText=("将文字换成一个标签1")
test.style.color="red";
</script>

输出结果是