|
js的核心思想
?? ??js的核心思想就是DOM思想(DOM全程:Document Object Model) 文档对象模型
什么是DOM思想
?? ??DOM思想是将我们的html页面中所有的内容看做是一个个对象
DOM对象的分类:
? ? 1.元素节点对象 对应html的标签
? ? 2.属性节点对象 对应html的属性
? ? 3.文本节点对象 对应html的文本
节点
如何获取元素节点对象?
? ? 1.通过id获取 返回的是一个当前这个对象
? ? var d1 ?= document.getElementById("d1");
? ? 2.通过class名称获取 返回的是对象数组 需要通过循环遍历获取每个对象
? ? var c1arr = document.getElementsByClassName("c1");
? ? 3.通过name名称获取 返回的是对象数组 需要通过循环遍历获取每一个对象
? ??var aihao = document.getElementsByName("aihao");
? ? 4.通过标签名获取 返回的是对象数组 需要通过循环遍历获取每一个对象
? ? var parr = document.getElementsByTagName("p");
如何操作属性节点对象?
? ? 第一步 获取元素节点对象(4种)
? ? 第二步 操作元素节点对象
? ? ?????????获取属性 对象名.属性
? ? ? ? ? ? ?给属性赋值 对象名.属性 = 值
?? ??? ??? ?
<input type="text" id="d2" value="这是个文本框" />
//通过id获取元素
var d2 = document.getElementById("d2");
//通过对象名.属性 = 值 给属性赋值
//d2.type = "radio";
//此刻input变为单选按钮
js如何操作特殊属性? (checked selected readonly)
针对于这类属性 我们可以赋值为 true 和 false
? ? ? 第一步 获取元素节点对象(4种)
? ? ? 第二步 操作属性节点对象
<input type="checkbox" id = "ckid" />唱跳
//通过id获取checkbox
var ckid = document.getElementById("ckid");
//操作特殊属性
ckid.checked = true;
//此刻默认唱跳复选框被选中
? ? ? ? ? ?
如何操作css属性?
? ? ? 第一步 获取元素节点对象(4种)
? ? ? 第二步 操作属性节点对象 ?对象名.style.css属性 = 值?
<input type="button" id="d3" value="注册" />
//通过id调用元素节点对象
var b = document.getElementById("d3");
//操作属性节点中css属性
b.style.backgroundColor = "red";//此刻按钮变为红色背景
?如何操作文本节点对象
? ? ? 第一步 获取元素节点对象(4种)
? ? ??第二步 操作文本节点对象?
? ? ? ? ? ?对象名.innerText 操作元素节点内部所有文本节点
? ? ? ? ? ?对象名.innerHTML 操作元素节点内部所有节点 (包含文本)
innerText和innerHTML 的区别
? ? innerText只能识别文本 都当做文本来看
? ? innerHTML可以识别任何节点对象(识别标签和文本 更常用)
<a href="https://www.baidu.com/" id = "d1">百度</a>
//通过id调用元素节点对象
var i = document.getElementById("d1");
//操作文本节点对象
i.innerText = "<h2>新浪</h2>";//此时展示结果为<h2>新浪</h2>
//操作文本节点对象
i.innerHTML = "<h2>新浪</h2>";//此时展示结果为二号标题标准的 新浪
js如何创建和拼接节点
? ? ?1.创建元素节点对象
? ? ?2.给元素节点属性赋值
? ? ?3.寻找父节点
? ? ?4.拼接子节点
你喜欢的明星
<ul id = "w">
<li>林青霞</li>
<li>王祖贤</li>
<li id = "z">周慧敏</li>
</ul>
//拼接新的元素节点
//1.创建元素节点对象
var li = document.createElement("li");
//2.给元素节点属性赋值
li.innerText = "朱茵";
//寻找父节点
var w = document.getElementById("w")
//拼接节点
w.appendChild(li);
如何删除元素节点对象
? ? ?1.获取要删除的元素节点对象
? ? ?2.通过remove()方法去删除对象
你喜欢的明星
<ul id = "w">
<li>林青霞</li>
<li>王祖贤</li>
<li id = "z">周慧敏</li>
</ul>
//删除元素
//获取要删除的元素节点对象
var z = document.getElementById("z");
//调用方法删除
z.remove();
事件
js事件的组成部分（面试题）
? ? ?1.事件源（触发事件）: 执行代码的目标 (比如 文本框 复选框 按钮)
? ? ?2.事件驱动程序（触发条件）: 执行的动作 （比如 鼠标单击 鼠标双击 键盘按下）
? ? ?3.事件驱动程序（触发结果）: 执行代码后的结果 （比如页面跳转）??
?js中如何定义事件
? ? ?1.事件绑定函数
? ? ? ? ? ?在标签上定义事件 onclick
? ? ? ? ? ?在js中定义函数 function run2()
? ? ? ? ? ?事件绑定函数 onclick = "run2()"
<input type="button" id="" onclick="run2('还有两分钟') " value="点我有惊喜" />
function run2(a){//不要写var
alert(a);//弹窗出a的内容(还有两分钟)
}
? ?2.函数绑定事件
|