通过 id 获取指定元素
.getElementById("idName");
由于 id 不可以重复, 所以找到了就会将找到的标签包装成
一个对象
返回给我们, 找不到就返回
null
注意点
: DOM 操作
返回的是一个对象
, 这个对象是宿主类型对象(浏览器提供的对象)
通过class名称获取
.getElementsByClassName("className");
由于 class 可以重复, 所以找到了就返回
一个存储了标签对象的数组
, 找不到就返回
一个空数组
通过标签属性 name 值获取
.getElementsByName("nameAttributeValue");
由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
注意点
:
getElementsByName 在不同的浏览器其中工作方式不同
在IE和Opera中，getElementsByName() 方法还会返回那些 id 为指定值的元素
let
oDiv1 =
document
.
getElementById
(
"box"
);
console
.
log
(oDiv1);
console
.
log
(
typeof
oDiv1);
let
oDivs1 =
document
.
getElementsByClassName
(
"father"
);
console
.
log
(oDivs);
let
oDivs2 =
document
.
getElementsByName
(
"test"
);
console
.
log
(oDivs);
let
oDivs3 =
document
.
getElementsByTagName
(
"div"
);
console
.
log
(oDivs);
let
oDiv4 =
document
.
querySelector
(
"#box"
);
let
oDiv5 =
document
.
querySelector
(
".father"
);
let
oDiv6 =
document
.
querySelector
(
"div>form"
);
let
oDivs7 =
document
.
querySelectorAll
(
".father"
);
console
.
log
(oDivs);
</
script
>
</
body
>
</
html
>
通过元素(节点)拿其他元素(节点)
获取父元素, 父节点
由于元素的父节点必然是元素, 所以下面俩方法作用是一样的
let item = document.querySelector(".item");
console.log(item.parentElement);
console.log(item.parentNode);
let parentEle = item.parentElement;
console.log(parentEle);
获取子元素, 子节点
妈的这名字不能很好的见名知意, 差评!
获取指定元素所有子代
.childNodes 拿所有节点
.children 拿所有元素
let oDiv = document.querySelector("div");
for(let node of oDiv.childNodes){
if(node.nodeType === Node.ELEMENT_NODE){
console.log(node);
获取指定节点中的第一个子代
.firstChild 拿第一个子节点
.firstElementChild 拿第一个子元素
let oDiv = document.querySelector("div");
console.log(oDiv.firstChild);
console.log(oDiv.firstElementChild);
获取指定节点中的最后一个子代
.lastChild 拿最后一个子节点
.lastElementChild 拿最后一个子元素
let oDiv = document.querySelector("div");
console.log(oDiv.lastChild);
console.log(oDiv.lastElementChild);
获取兄弟元素, 获取兄弟节点
获取指定节点的相邻上一个兄弟
.previousSibling 获取相邻上一个节点
.previousElementSibling 获取相邻上一个元素
let item = document.querySelector(".item");
console.log(item.previousSibling);
console.log(item.previousElementSibling);
获取指定节点的相邻下一个兄弟
.nextSibling 获取相邻下一个节点
.nextElementSibling 获取相邻下一个元素
let item = document.querySelector(".item");
console.log(item.nextSibling);
console.log(item.nextElementSibling);
元素节点增删改查
再提醒自己一波: DOM 里元素是节点的子集
创建: document.createElement("elementName");
推入尾部: parentNode.appendChild(newChildNode);
插入节点: parentNode.insertBefore(newChildNode, targetSiblingNode);
只能通过父节点删子节点: childNode.parentNode.removeChild(anotherChildNode);
改是好大一块, 另外讲
查就是 queryXX 啦
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>JavaScript-元素增删改查</title>
</head>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script>
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
let oSpan = document.createElement("span");
console.log(oSpan);
console.log(typeof oSpan);
oDiv.appendChild(oSpan)
let oA = document.createElement("a");
oDiv.appendChild(oA);
oDiv.insertBefore(oSpan, oH1);
oDiv.insertBefore(oSpan, oP);
console.log(oSpan.parentNode);
oSpan.parentNode.removeChild(oSpan);
let newDiv = oDiv.cloneNode(true);
console.log(newDiv);
</script>
</body>
</html>
属性节点增删改查 (废弃节点)
元素节点的默认属性可以通过 . 操作来实现
但自定义属性的增改删查要用到 .setAttribute, .removeAttribute, .getAttribute
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>JavaScript-元素属性操作</title>
</head>
<img src="images/1.jpg" alt="我是alt222" title="我是title" fhs="666">
<script>
无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们,
系统在包装这个对象的时候会自动将元素的属性都包装到这个对象中,
所以只要拿到这个对象就可以拿到标签属性,操作标签属性
let oImg = document.createElement("img");
console.dir(oImg);
let oImg = document.querySelector("img");
通过对象.属性名称的方式无法获取到自定义属性的取值
通过getAttribute方法可以获取到自定义属性的取值
console.log(oImg.nj);
console.log(oImg.getAttribute("fhs"));
let oImg = document.querySelector("img");
oImg.setAttribute("fhs", "123");
let oImg = document.querySelector("img");
// oImg.it666 = "it";
// 注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改
oImg.setAttribute("it666", "itzb");
let oImg = document.querySelector("img");
oImg.removeAttribute("fhs");
</script>
</body>
</html>
操作元素内容
获取元素内容
.innerHTML
.innerText
.textContent
innerText 和 textContext 作用是一样的, 只不过不同浏览器支持的方法名有不同
给上面的属性赋值就好了
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>JavaScript-元素内容操作</title>
</head>
我是div
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script>
1.innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
2.innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格
let oDiv = document.querySelector("div");
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
console.log(oDiv.textContent);
无论通过 innerHTML/innerText/textContent 设置内容, 新的内容都会覆盖原有的内容
如果通过 innerHTML 设置数据, 数据中包含标签, 会转换成标签之后再添加
如果通过 innerText/textContent 设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置
let oDiv = document.querySelector("div");
setText(oDiv, "www.it666.com");
function setText(obj, text) {
if("textContent" in obj){
obj.textContent = text;
}else{
obj.innerText = text;
</script>
</body>
</html>
操作元素样式
通过 JavaScript 设置 CSS 样式注意点:
JS 可以通过给元素添加类名或修改 style 对象相应属性值的方式来设置 CSS 样式
JS 通过 style 属性只能拿到行内样式的值, ==拿不到== CSS 文件中设置的样式
JS 通过 window.getComputedStyle(selector); 可以==拿到==对应选择器的 css 对象, 从而修改外链样式
CSS 中通过短杠连接的属性名在 JS 中以驼峰形式出现
通过 js 添加的 css 属性是行内样式, 优先级高于 css 文件设置的样式
.className
.style
.getComputedStyle(Element)
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>JavaScript-操作元素样式</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
</style>
</head>
<div class="box"></div>
<script>
let oDiv = document.querySelector("div");
// 第一种方式
// 注意点: 由于class在JS中是一个关键字, 所以叫做className
// oDiv.className = "box";
// 第二种方式
// 注意点: 过去CSS中通过-连接的样式, 在JS中都是驼峰命名
// 注意点: 通过JS添加的样式都是行内样式, 会覆盖掉同名的CSS样式
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.backgroundColor = "blue";
let oDiv = document.querySelector("div");
let style = window.getComputedStyle(oDiv);
console.log(style.width);
</script>
</body>
</html>
什么是事件?
用户和浏览器之间的交互行为我们就称之为事件, 比如：点击，移入/移出
如何给元素绑定事件?
在 JavaScript 中所有的HTML标签都可以添加事件
元素.事件名称 = function(){};
当对应事件被触发时候就会自动执行function中的代码
注意点:
如果给元素添加了和系统同名的事件 (比如 a 标签的跳转), 我们添加的事件不会覆盖系统添加的事件
通过 元素.事件名称 = function(){}; 的函数体里 return false; 可以禁用系统默认事件
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>08-JavaScript-DOM事件</title>
</head>
<button>我是按钮</button>
<a href="http://www.it666.com">我是a标签</a>
<script>
let oBtn = document.querySelector("button");
oBtn.onclick = function () {
alert("按钮被点击了");
let oA = document.querySelector("a");
oA.onclick = function () {
alert("a标签被点击了");
return false;
</script>
</body>
</html>
fhsWar
高级前端开发工程师 @ 平安寿险
粉丝
