【Javascript Day13、14、15、16】

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#事件

元素的内容控制

// innerText 属性用于获取或覆盖标签内容

// 区别

// 取值：去除换行，首尾空格，去除标签和标签属性，只保留文本，文本之间的空格只保留一个

// 赋值：如果字符串符合标签格式，覆盖时不会进行标签解析

// 会将\n转换为<br>标签

function editTextContent(){

var textDom = document.querySelector("#text1")

var oldText1 = textDom.innerText;

console.log(oldText1);

// textDom.innerText = '<h3 style="color:red;">标签规则定义的字符串</h3>';

textDom.innerText = 'aaaa\nbbbb\nccccc';

}

</script>

<hr>

html3的原始内容

</div>

// 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数据

<!--

DOM dataset 数据：提供一种简单的自定义属性的赋值和取值操作

在标签上以 data-自定义属性名 = "属性值" 的方式记录数据
通过DOM对象的 dataset 直接调用自定义属性名即可

-->

<p data-chw="张三" id="p1">dataset数据</p>

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>

页面组成

</div>

var closeBtn = document.querySelector("#closeBtn");

closeBtn.onclick = function(){

console.log( this.parentNode );

console.log( this.parentNode.parentNode );

this.parentNode.parentNode.style.display = "none";

}

</script>

<hr>

</ul>

function printChildEle(){

var lis = document.querySelectorAll("#abc li");

var ulDom = document.querySelector("#abc");

console.log( ulDom.childNodes );

console.log( ulDom.children );

}

</script>

节点的创建和添加

</div>

// document.createElement(标签名称) 基于标签名称创建DOM节点

// 任意的DOM元素.appendChild(DOM对象) 向指定的元素内部添加子DOM节点（追加）

function createDom(){

var divDom1 = document.createElement("div");

console.log(divDom1);

divDom1.innerHTML = "内容:" + Math.random();

divDom1.classList.add("fs");

divDom1.style.color = "red";

console.log(divDom1);

var boxDom = document.querySelector("#box");

// innerHTML需要字符串作为值，但DOM是对象，会被转换为 [object HTML标签名Element]

// boxDom.innerHTML = divDom1;

boxDom.appendChild( divDom1 )

}

</script>

<hr>

<p>asdasdasdads</p>

<!-- <div class="sing">

<p>乡村之旅：安静惬意·与自然同在</p>

</div>

</div> -->

</div>

console.log(list);

function initSingDom(){

var box = document.querySelector(".singBox");

box.innerHTML = ""; // 清空旧数据

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>

节点的操作方法

<h5>默认第一个元素</h5>

<h5 id="a">默认第二个元素</h5>

</div>

var boxDom = document.querySelector("#box");

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>

<!-- https://element.eleme.cn/#/zh-CN/component/transfer

穿梭框

-->

</div>

<div>

<input type="button" value=">" οnclick="moveChild()">

</div>

</div>

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

var box2 = document.querySelector("#box2")

function moveChild(){

// 元素的唯一性

box2.appendChild( box1.children[1] )

}

</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>