当前位置：首页 > news >正文

【Javascript Day13、14、15、16】

news 2026/2/9 14:04:15

html的DOM操作

// JS 是为了让页面实现动态网页效果
// 动态和静态区分取决于JS的和页面标签的数据交互
// 动态网页：有数据交互
// 静态网页：无数据交互

// JS 和元素的关联操作对象 DOM
// 整个HTML页面的整体代码叫做 DOM文档
// 每个标签阶段叫做DOM对象|DOM元素|DOM节点

// JS 查询、修改、删除、更新 DOM元素的方式实现页面数据交互效果
document.write("<h1>DOM元素添加操作</h1>")
// document ： DOM文档 => 整个页面代码
console.log(document);

// 元素查询，必须先保证元素存在 => dom查询必须晚于DOM的渲染
console.log( window.onload );
window.onload = function(){
console.log("HTML页面渲染完成");

// 1. 基于标签ID查询元素 => 从上向下查询第一个符合规则的DOM元素
var h1Dom = document.getElementById("a");
console.log(h1Dom);
// DOM对象.innerHTML 通过js = 赋值运算符，完成标签内容的填充
h1Dom.innerHTML = new Date().toLocaleString();
}

html的DOM查询方法

window.onload = function(){
// 1. 基于标签ID查询元素 => 从上向下查询第一个符合规则的DOM元素
var h1Dom = document.getElementById("a");

// 2. 基于标签名称查询元素集合
// => 返回的是一个类似数组结构但不能使用数组方法的类数组数据
var liList = document.getElementsByTagName("li");
console.log(liList);

// 3. 基于class样式查询元素集合
var tipList = document.getElementsByClassName("tip");
console.log( tipList );

// 基于el查询元素
// el|selecter:element select css选择器
// 4. document.querySelector => 从上而下查询第一个符合选择器规则元素，返回一个元素
// 5. document.querySelectorAll => 查询所有符合规则的元素，返回一个集合
var aDom = document.querySelector("#a");
console.log(aDom);
var tipDom = document.querySelector(".tip");
console.log(tipDom);
var tipDoms = document.querySelectorAll(".tip");
console.log(tipDoms);

var ulTipDoms = document.querySelectorAll("ul .tip");
console.log(ulTipDoms);

var ulDom = document.querySelector("#b");
console.log(ulDom);
// 从ulDom元素内部查找class=tip的所有元素
var ulTipDoms2 = ulDom.querySelectorAll(".tip")
console.log(ulTipDoms2);

console.log( document ); // 文档类型标识，html-DOM对象
// 6. 快速获取HTML
console.log( document.documentElement ); // html-DOM对象
// 7. 快速获取body
console.log( document.body ); // body-DOM对象
// 8. 快速获取head
console.log( document.head ); // head-DOM对象
}

元素事件

function showTip(){
alert("111")
}

window.onload = function(){
// 步骤1:获取DOM对象
var btnDom1 = document.querySelector("#btn1");
// 步骤2:通过对象属性 onclick 取值方法完成事件绑定
btnDom1.onclick = function(){
alert("2222")
}
// console.log(btnDom1);
console.dir(btnDom1); // 输出对象格式

var liDoms = document.querySelectorAll("li");
for (var i = 0; i < liDoms.length; i++) {
// console.log( liDoms[i] );
liDoms[i].onclick = function(){
alert("li提示")
}
}
}

// 完整事件文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Element#%E4%BA%8B%E4%BB%B6

元素的内容控制

<hr>
<div id="content">
html3的原始内容
<span style="color: red;">标签</span>
</div>
<input type="button" value="textContent操作" οnclick="editContent()">
<script>
// textContent 属性用于获取或覆盖标签内容
// 特性等同于 innerText 的
// 和innerText区别
// 取值：不会删除换行，和空格
// 赋值：不会将\n转换为<br>
function editContent(){
var contentDom = document.querySelector("#content");
console.log( contentDom.textContent );

contentDom.textContent = 'aaaa\nbbbb\nccccc';
}
</script>

元素的属性操作

// 标签的自定义属性，被存放在 DOM对象的 attributes 属性对象上
// attributes 存储的自定义属性以属性名作为对象key,value取值是一个对象提供value记录属性值

// attributes 属性在DOM对象上存在两个专用方法
// DOM对象.getAttribute("自定义属性名") => 获取自定义属性对应的值
// DOM对象.setAttribute("自定义属性名","属性值")

function getDomAttr(){
var pDom = document.querySelector("#pDom");
console.dir(pDom)
// console.log( pDom.username );
// console.log( pDom.attributes.username.value );
var v = pDom.getAttribute("username");
console.log(v);

}
function setDomAttr(){
var pDom = document.querySelector("#pDom");
console.log(1111);
// pDom.username = "李四";
// pDom.attributes.username.value = "李四"
pDom.setAttribute("username","李四")
}

元素样式操作

function setStyle(){
var pDom = document.querySelector("#pDom");

// JS获取的DOM对象，存在一个行内样式的记录属性 style
// dom对象.style.样式名 => 取样式
// dom对象.style.样式名="样式有效值" => 设置样式

console.log(pDom.style);

console.log( pDom.style.color );
// pDom.style.color = "blue";
// pDom.style.color = "rgb(0,255,0)";
// pDom.style.color = "rgba()";
// pDom.style.color = "#00FF00";
pDom.style.color = "#FF000099";

console.log( pDom.style.border );
// pDom.style.border = "2px solid red";
// pDom.style.border-color = "red"; // 报错
// pDom.style.borderColor = "red"; // 正确
pDom.style["border-color"] = "red"; // 正确

// 修改后的样式依然需要遵受样式优先级
}

// class 是所有代码系统的关键字 => 类
// class 在JS中是关键字

function editDomClass(){
var pDom = document.querySelector("#pDom");
// 因为class是关键字，所有元素的类样式，没有使用class作为属性名
console.log( pDom.class );
// 标签的类样式，使用 className 作为DOM属性名
console.log( pDom.className ); // 取值

// className 赋值是和标签定义class属性的规则一致
// 类样式名只有在样式代码中定义，才会存在样式
// 多个类样式直接以空格隔开
// pDom.className = "border"; // 完全覆盖

// 方法1 ：以字符分割数组操作
// var str = pDom.className;
// var arr = str.split(" ");
// console.log(arr);
// arr.push("border");
// pDom.className = arr.join(" ");

// 方式2 ：字符串操作
// pDom.className = pDom.className + " border";

// 方法3 : h5辅助属性 classList
console.log( pDom.classist );

// pDom.classList.add("border"); // 添加新样式
// pDom.classList.remove("fc"); // 删除已有样式
pDom.classList.toggle("fc"); // 样式切换，当操作的样式存在则删除，不存在则添加
}

标签的dataset数据

<p data-chw="张三" id="p1">dataset数据</p>
<input type="button" value="获取数据" οnclick="getDataSet1()">
<script>
function getDataSet1(){
var pDom1 = document.querySelector("#p1");
console.log( pDom1.attributes['data-chw'].value );
console.log( pDom1.getAttribute("data-chw") );

console.dir( pDom1 );
console.log( pDom1.dataset );

console.log( pDom1.dataset.chw );

}

</script>

页面组成

</script>

<hr>
<ul id="abc">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
<li>元素5</li>
</ul>
<input type="button" value="获取子节点" οnclick="printChildEle()">
<script>
function printChildEle(){
var lis = document.querySelectorAll("#abc li");
var ulDom = document.querySelector("#abc");
console.log( ulDom.childNodes );
console.log( ulDom.children );
}
</script>

节点的创建和添加

var boxDom = document.querySelector("#box");
// innerHTML需要字符串作为值，但DOM是对象，会被转换为 [object HTML标签名Element]
// boxDom.innerHTML = divDom1;
boxDom.appendChild( divDom1 )
}
</script>

<hr>

<div class="singBox">
<p>asdasdasdads</p>

</div>

for (var i = 0; i < list.length; i++) {
// console.log(list[i]);
var imgDom = document.createElement("img");
imgDom.src = list[i].pic;
// console.log(imgDom);

var titleP = document.createElement("p");
titleP.innerHTML = list[i].title;
// console.log(titleP);

var infoP = document.createElement("p");
infoP.innerHTML = list[i].info;
// console.log(infoP);

var peP = document.createElement("p");
peP.innerHTML = list[i].pe;
// console.log(peP);

var divInfoBox = document.createElement("div");
divInfoBox.classList.add("info");
divInfoBox.appendChild(titleP);
divInfoBox.appendChild(infoP);
divInfoBox.appendChild(peP);
// console.log(divInfoBox);

var singBox = document.createElement("div");
singBox.classList.add("sing");
singBox.appendChild(imgDom);
singBox.appendChild(divInfoBox);
// console.log(singBox);

box.appendChild(singBox);
}
}
initSingDom()
</script>

节点的操作方法

<div class="box" id="box">
<h5>默认第一个元素</h5>
<h5 id="a">默认第二个元素</h5>
</div>

function appendChildDom(){
// 元素创建
var h5Dom = document.createElement("h5");
h5Dom.innerHTML = "appendChild标签内容";
// 在父元素的末尾追加新元素
boxDom.appendChild(h5Dom);
}

function insertChildDom(){
var h5Dom = document.createElement("h5");
h5Dom.innerHTML = "insertBefore标签内容" + Math.random() ;
// 元素DOM.insertBefore() 在父元素内部，指定已存在的子元素前面进行新元素的插入
// boxDom.insertBefore(h5Dom, boxDom.children[1] )
boxDom.insertBefore(h5Dom, boxDom.children[0] );
}

function removeChildDom(){
// boxDom.removeChild( boxDom.children[1] )
var h5Dom = document.querySelector("#a");
boxDom.removeChild( h5Dom )
}
</script>

<hr>

<div class="tr">
<div class="box" id="box1">
<p>元素1</p>
<p>元素2</p>
<p>元素3</p>
</div>
<div>
<input type="button" value=">" οnclick="moveChild()">
</div>
<div class="box" id="box2"></div>
</div>
<script>
var box1 = document.querySelector("#box1");
var box2 = document.querySelector("#box2")

function moveChild(){
// 元素的唯一性
box2.appendChild( box1.children[1] )
}
</script>

元素事件注册

<input type="button" value="按钮1" οnclick="showTip1()" οnclick="showTip2()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
<script>
// 传统事件注册 => DOM对象的事件属性的赋值操作
// + 同类型事件只能注册一次，HTML标签的后续注册不生效，JS的后续的注册属于覆盖操作
function showTip1(){
alert(1)
}
function showTip2(){
alert(11)
}

var btn2 = document.querySelector("#btn2");
// console.dir(btn2)
btn2.onclick = function(){
alert(2)
}
btn2.onclick = function(){
alert(22)
}

// 事件监听 => 独立于DOM属性之外的事件控制
// 事件监听的注册不是DOM对象的事件属性赋值
// 事件监听在同事件类型上，可以完成多方法的绑定 => 方法按照绑定先后触发
var btn3 = document.querySelector("#btn3");
// dom对象.addEventListener("事件名",执行方法)
// 事件名是不包含on
btn3.addEventListener( "click", function(){
alert(3)
} );
btn3.addEventListener( "click", function(){
alert(33)
} );
btn3.addEventListener( "click", function(){
alert(333)
} );

// 浏览器在元素选项卡中，提供两个页面事件监听属性
// 事件监听：包含当前元素的所有事件
// 属性：包含当前元素的所有属性
// console.log(btn3);

</script>

html的DOM操作

html的DOM查询方法

元素事件

元素的内容控制

元素的属性操作

元素样式操作

标签的dataset数据

页面组成

节点的创建和添加

节点的操作方法

元素事件注册

相关文章：