dom相关

<!DOCTYPE html>

<head>

<title>Document</title>

window.onload = function () {

// document.getElementById();方法可返回对拥有指定 ID 的第一个对象的引用。

// document.getElementsByClassName();方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

// document.getElementsByName();方法可返回带有指定名称的对象的集合。

// document.getElementsByTagName();方法返回带有指定名称的所有元素的 NodeList。

// document.querySelector(); 对象

// document.querySelectorAll(); 数组

// var li = document.querySelector("#li1");

// 下面这俩几乎一样，但存在唯一区别

// console.log(li.parentElement);//parentElement找根节点，也就是body，html

// console.log(li.parentNode);//parentNode寻在元素，最终返回#document

// var ul =document.querySelector("ul");

// console.log(ul.childNodes); 文本节点，就是每行代码后面以及下一行代码前面那条很长的空格

// console.log(ul.children); 不包括文本节点

// 兄弟节点

// var li = document.querySelector("#li1");

// li.nextElementSibling();

// console.log(li.nextElementSibling);

//nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）

// console.log(li.previousElementSibling);

//previousElementSibling 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）

// console.log(li.nextSibling);

//nextSibling 获取文本节点，属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）

// 样式 style

// var li = document.querySelector("#li1");

// li.style.color="red";

// li.style.background-color="#ccc";注意！！！短横线- 在这里无法使用，会进行报错

// li.style.backgroundColor="#ccc";解决办法一：驼峰命名法，去掉短横线并大写后一个单词的首字母

//li.style.["background-color"]="#ccc";解决办法二：数组解决法，用中括号括住并加双引号

// 属性 attributes

// console.log(li.id);

// console.log(li["data-id"]);可以运行但是值为未知

// console.log(li.attributes["data-id"]);attributes:获取非原始属性以及带短横杠的属性

// console.log(li.className);

// 事件

// *click

// *change 多用于：1单选、多选状态改变；2：下拉框选项改变；3：文本框的值改变

// *mouseover

// *mouseout

// keydown

// *keypress 能获取到你按的键

// keyup

// *标记较为常用的事件

// var btn = document.querySelector("button");

// btn.onload = function(){

// console.log(this.value) 交互控件的值

// }

// var li = document.querySelector("#li1");

// li.onload = function(){

// //console.log(this.innerHTML);同时获取标签和值。从对象的起始位置到终止位置的全部内容, 不包括HTML标签。

// innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

// //console.log(this.innerText);只获取内容。

// innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。

// innerHTML返回的是标签内的 html内容，包含html标签。

// innerText返回的是标签内的文本值，不包含html标签。

// // console.log(this.outerHTML);包含innerHTML的全部内容外, 还包含对象标签本身。

// }

var select = document.querySelector("select");

// select标签必定会发生改变，所有要求使用onchange事件

select.onchange = function () {

console.log(this.value)

}

</script>

</head>

<body>

<!-- <ul>

</ul>

</select>

</body>

</html>

posted @ 2021-11-05 16:09 610鸭阅读(17) 评论(0) 收藏举报

刷新页面返回顶部

dom相关

公告