js复习（03）

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

JavaScript的组成

DOM概念 -> 了解

• DOM中的几个常用概念
  • 文档： 一个网页可以称为文档
  • 节点： 网页中的所有内容都是节点
  • 元素： 网页中的标签
  • 属性： 标签的属性
• 常用事件

<buuton onClik="dj()">点击</button>
<button onClick="sj()">双击</button>
<button onClick="jg()">经过</button>
<button onClick="lk()">鼠标经过</button>

function dj(){
        alert("恭喜中奖了")
}

function sj(){
    alter("双击经过了")
}

function jg(){
    alter("经过了")
}

function lk(){
    alter("鼠标离开了")
}

事件

• 事件三要素
  • 事件源：被触发的对象
  • 事件：用户的操作 -> 鼠标点击 鼠标经过 鼠标离开
  • 事件处理程序：事件触发后要执行的代码

获取页面元素

• 根据id获取元素

<div class="box">
   <img src="01.jpg" alt="" id="pic" />
   <ul>
      <li onclick="fun1()" >1</li>
      <li onclick="fun2()" >2</li>
   </ul>
</div>

function fun1(){
    document.getElementById("pic").src="01.jpg"
}

function fun2(){
    document.getElementById("pic").src="02.jpg"
}

• 根据标签名获取元素 -> 掌握

<input type="button" value="显示效果" id="btn">
<p>哈哈</p>
<p>哈哈</p>

var btn = document.getElementById("btn");//获取id为btn的元素
btn.onclick = function () {
   //根据标签名字获取标签
   var pObjs = document.getElementsByTagName("p");
   //无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
   console.log(pObjs);
   //循环遍历这个数组
   for(var i =0; i < pObjs.length; i++){
      //每个p标签,设置文字
      pObjs[i].innerText = "我们都是P标签";
   }
};
//document.getElementsByTagName("标签的名字");返回的是一个伪数组,

• 非表单元素的属性

<input type="button" value="显示效果" id="btn">
<a id="ak" href="https://www.asafs.com">鸠摩搜书</a>

var btn = document.getElementById("btn");
btn.onclick = function () {
    var aObj = document.getElementById("ak");
    //根据id获取超链接,设置href属性
    aObj.href = "http://www.baidu.com";
    //根据id获取超链接,设置文字内容
    aObj.innerText ="改变了";
}

表单元素属性

• value 获取和设置表单元素的内容
• type 获取和设置input标签的类型
• checked 复选框选中的属性（true选中 | false不选中）

点击按钮修改value属性

   <input type="button" value="按钮" id="btn"> 

var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
    //修改按钮的value属性
    //btnObj.value = "我是按钮我被修改了";
     this.value = "我是按钮我被修改了";
     this.type = "text";
     this.id = "btn2";//审查元素看到id也是可以被修改的
}

自定义属性操作 -> 掌握

• getAttribute 获取标签行内属性
• setAttribute 设置标签行内属性
• removeAttribute 移除标签行内属性

    <div id="app">app</div>

var div = document.getElementById("app")

div.setAttribute("score", 1)

console.log(div.getAttribute("score"))

div.removeAttribute("score")

console.log(div.getAttribute("score"))

• 总结

DOM 文档对象模型中，常用方法，事件，属性的小结如下

常用方法(获取页面标签元素)
    getElementById(): 根据id获取元素;
    getElementsByTagName(): 根据标签名获取元素;

常用的事件
    onclick: 点击事件
    onfocus: 获得焦点事件
    onblur: 失去焦点事件
    onmouseover: 鼠标移入(经过)事件
    onmouseout: 鼠标移出事件
    
常用的元素属性	
    非表单元素属性   href  title  src  alt 等
    表单元素属性	type  value  checked  disabled  selected 等
    公共属性	id   className  style
    样式属性	
    	className: 用于引用定义好的外部样式,如嵌入式, 外联式样式;
    	style: 用于设置行内内样式, 行内样式优先级比嵌入式, 外联式的优先级高;

自定义属性操作(使用三个标准方法)
    	setAttribute(): 根据指定的属性名, 设置标签行内属性;
		getAttribute(): 根据指定的属性名和值, 获取标签行内属性. 参数一: 属性名; 参数二: 属性值;
		removeAttribute(): 根据指定的属性名, 删除标签行内属性;

获取相关节点 -> 理解

<div id="dv">
  <span>这是div中的第一个span标签</span>
  <p>这是div中的第二个元素,第一个p标签</p>
  <ul id="uu">
    <li>乔峰</li>
    <li>鹿茸</li>
    <li id="three">段誉</li>
    <li>卡卡西</li>
    <li>雏田</li>
  </ul>
</div>

/ul标签的父级节点
console.log(ulObj.parentNode);
//ul标签的父级元素
console.log(ulObj.parentElement);

//ul的父级节点是div--是标签
console.log(ulObj.parentNode.nodeType);//div标签的节点类型是 1
console.log(ulObj.parentNode.nodeName);//div标签的节点名称是 大写的标签名字DIV
console.log(ulObj.parentNode.nodeValue);//div标签的节点的值是 null


//扩展如下：
var dvObj = document.getElementById("dv");
    //子节点
    console.log(dvObj.childNodes);//7个子节点（包含标签和文本）
    //子元素
    console.log(dvObj.children);//3个 span、p和ul
    //节点的范围大(回车换行也算文本节点)，元素的范围小

    //2、获取里面的每个子节点
    for(var i = 0; i < dvObj.childNodes.length; i++){
        var node = dvObj.childNodes[i];
        //nodeType--->节点的类型:1---标签,2---属性,3---文本
        //nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
        //nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
        console.log(node.nodeType + "=====" + node.nodeName + "=====" + node.nodeValue);
    }

    //3、获取的是属性的节点(用的很少)
    var dvObj = document.getElementById("dv");
    var node = dvObj.getAttributeNode("id");//获取的是属性的节点
    console.log(node.nodeType + "=====" + node.nodeName + "=====" + node.nodeValue);

获取相关节点 -> 理解

<div id="dv">
    <span>这是div中的第一个span标签</span>
    <p>这是div中的第二个元素,第一个p标签</p>
    <ul id="uu">哈哈
        <li>乔峰</li>
        <li>鹿茸</li>嘿嘿
        <li id="three">段誉</li>呵呵
        <li>卡卡西</li>
        <li>雏田</li>嘎嘎
    </ul>
</div>

//都是获取节点和元素的
var ulObj=document.getElementById("uu");
//父级节点
console.log(ulObj.parentNode);
//父级元素
console.log(ulObj.parentElement);
//子节点
console.log(ulObj.childNodes);
//子元素
console.log(ulObj.children);
console.log("==============================================");
//第一个子节点
console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
//第一个子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//最后一个子节点
console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持

//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
//某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);

创建元素三种方式

• document.write()：将一个文本字符串写入到由 document.open() 打开的一个文档流中；
• innerHTML：设置或获取HTML语法表示的元素的后代；
• document.createElement( tagName )：创建由 tagName 指定的HTML元素；
  • 第一种

dicument.write("<p>创建的元素</p>")

- 第二种

ById("app").innerHTML = "<p>p元素</p>"

- 第三种

第一步先创建元素
第二步将创建的元素追加到父元素中

var P = document.createElement("p")  //创建一个p元素
p.innerText = "这是一个p元素"   //添加上内容
ById("div").appendChild(P)     //追加