在HTML DOM中,elment对象表示HTML与纳素,可以包含的节点类型有元素u节点、文本节点、注释节点。它们有响应的属性和方法,有很多都是我们之前用过的。
一、element对象属性
1、attributes
该属性返回标签元素的所有属性集合,也就是NamedNodeMap,这个属性比较好理解,返回的是所有标签元素的属性,并不是对象的属性,而是我们写在HTML代码中的标签属性,如id、name
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<p id="content" name="text" class="p_text">我有很多属性点击按钮查看</p>
<button onclick="getAttr()">点击查看p标签的属性</button>
</body>
<script>
function getAttr(){
var pObj = document.getElementById('content');
var attr = pObj.attributes;
console.log(attr);
}
</script>
</html>
2、childNodes
该属性返回元素节点的所有子节点集合,包括空白文本节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content">
<a href="https://www.zhishunet.com">知数SEO</a>
<p>专注建站优化8年</p>
<span>你身边的建站优化专家</span>
<p>生意在于流量</p>
</div>
<button onclick="getChild()">点击获取div所有的子节点</button>
</body>
<script>
function getChild(){
var divObj = document.getElementById('content');
var child = divObj.childNodes;
console.log(child);
}
</script>
</html>
3、className
这个属性可以用来设置和获取标签元素的class属性值,在开发中经常会被用到,例如:通过点击按钮来改变某个模块的整体样式,类似夜间模式的切换等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
<style>
.font{
font-size: 20px;
}
.color{color: red}
.new_class{
line-height: 50px;font-weight: bold;
}
</style>
</head>
<body>
<p id="content" class="font color">建站优化选知数SEO</p>
<button onclick="getClass()">获取classname</button>
<button onclick="setClass()">设置classname</button>
<button onclick="addClass()">添加classname</button>
</body>
<script>
// 获取p标签元素对象
var pObj = document.getElementById('content');
// 获取classname
function getClass(){
var classname = pObj.className;
console.log(classname);
}
// 设置classname
function setClass(){
pObj.className = 'new_class';
getClass(); // 显示class
}
// 新添加clasname
function addClass(){
pObj.className = pObj.className + ' ' + 'new_class';
getClass();
}
</script>
</html>
4、clientWidth、offsetWidth、scrollWidth等宽高属性
5、contentEditable
这个属性可以改变标签元素是否可以编辑的状态,它的值有两个:true表示可编辑,false表示不可编辑。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<p id="p1">这个p标签不可编辑,点击按钮后可编辑</p>
<p id="p2" contenteditable="true">这个p标签可编辑,点击按钮后不可编辑</p>
<button onclick="setEdit()">让p标签的文字可编辑</button>
<button onclick="setNoEdit()">让p标签的文字不可编辑</button>
</body>
<script>
// 设置标签可编辑
function setEdit(){
var inputObj = document.getElementById('p1');
inputObj.contentEditable = true;
}
function setNoEdit(){
var inputObj = document.getElementById('p2');
inputObj.contentEditable = false;
}
</script>
</html>
6、dir
这个属性可以设置或者返回文本的方向,在一些特殊情况下会用到,在HTML标签元素中也有这个属性,它的值是rlf表示文本方向向右👉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content" dir="rtl">一个懂建站优化的程序员,既懂建站又会优化</div>
<br>
<button onclick="getDir()">获取文本的方向</button>
<br>
<button onclick="setDir()">设置文本方向</button>
</body>
<script>
// 获取div元素读喜庆
var divobj = document.getElementById('content');
// 显示文本的显示方向
function getDir(){
var dir = divobj.dir;
console.log(dir);
}
// 设置文本的显示方向
function setDir(){
divobj.dir = 'ltl';
}
</script>
</html>
7、firstChild 和 lastChild
前者用于获取元素节点的第一个子节点,后者用于获取元素节点的最后一个子节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content"><p>这是第一段文字</p><p>这是第二段文字</p><p>这是第三段文字</p></div>
<button onclick="getFirstChild()">获取第一个子节点</button>
<button onclick="getLastChild()">获取最后一个子节点</button>
</body>
<script>
// 获取div元素读喜庆
var divObj = document.getElementById('content');
// 获取第一个子节点
function getFirstChild(){
var first = divObj.firstChild;
console.log(first);
}
function getLastChild(){
var last = divObj.lastChild;
console.log(last);
}
</script>
</html>
8、id
// 可以通过element.id 便捷的获取到元素的id值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content"><p>这是第一段文字</p><p>这是第二段文字</p><p>这是第三段文字</p></div>
<button onclick="getFirstChild()">获取第一个子节点</button>
<button onclick="getLastChild()">获取最后一个子节点</button>
</body>
<script>
// 获取div元素读喜庆
var divObj = document.getElementById('content');
console.log(divObj.id); // content
</script>
</html>
9、innerHTML 和 textContent
前者设置和获取标签元素的内容(包括HTML标签),后者只能设置和获取标签元素的文本的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content" class="text">
我是文本内容
<p>我是p标签内容</p>
</div>
<button onclick="getHtml()">获取div的内容</button>
<br>
<button onclick="setHtml()">设置div的内容</button>
<br>
<button onclick="getText()">获取div的文本内容</button>
<br>
<button onclick="setText()">设置div的文本内容</button>
</body>
<script>
// 获取div元素读喜庆
var divObj = document.getElementById('content');
// 获取元素标签内容
function getHtml(){
var id = divObj.innerHTML;
console.log(id);
}
// 设置元素u标签内容
function setHtml(){
divObj.innerHTML = '我是新文本<a href="#">我是链接</a>'
getHtml();
}
// 获取div的文本
function getText(){
var text = divObj.textContent;
console.log(text);
}
// 设置div文本
function setText(){
divObj.textContent = '<p>新文本</p>'
getText();
}
</script>
</html>
10、previousSibling 和 nextSibling
前者用于获取上一个兄弟节点
后者用于获取下一个兄弟节点
11、nodeName、nodeType、nodeValue
nodeName属性用于返回元素的名字
nodeType属性用于返回元素的类型
nodeValue属性用于设置和返回元素的值
11、style
这个属性可以设置和返回标签元素的style属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content" style="border:1px solid red">
<p>建站优化专家-知数SEO</p>
<p>专注搜索引擎优化8年</p>
</div>
<button onclick="getStyle()">获取div的style</button>
<button onclick="setStyle()">设置div的style</button>
</body>
<script>
var divObj = document.getElementById('content');
function getStyle(){
var style = divObj.style;
console.log(style);
}
function setStyle(){
divObj.style = "background:green";
getStyle();
}
</script>
</html>
二、element对象方法
1、appendChild()
该方法向元素添加新的子节点,作为最后一个子节点。
我们常见的瀑布流,新生成的元素节点就是通过这个方法追加到某个元素节点中的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content">
<p>建站优化专家-知数SEO</p>
<p>专注搜索引擎优化8年</p>
</div>
<button onclick="addChild()">添加新的子节点</button>
</body>
<script>
function addChild(){
var divObj = document.getElementById('content');
var newP = document.createElement('p');
newP.textContent = '选择优化找知数SEO';
divObj.appendChild(newP);
}
</script>
</html>
2、insertBefore()
该方法在已有的子节点之前插入新的子节点,不同于appendChild()方法直接在最后添加子节点,insertBefore()方法在某个确定的子节点前面添加节点,他有两个参数:
- 参数1:是要添加进去的新节点
- 参数2:目标节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content"><p>建站优化专家-知数SEO</p><p>专注搜索引擎优化8年</p></div>
<button onclick="insert()">添加新的子节点</button>
</body>
<script>
function insert(){
var divObj = document.getElementById('content');
var newP = document.createElement('p');
newP.textContent = '选择优化找知数SEO';
divObj.insertBefore(newP,divObj.firstChild);
}
</script>
</html>
3、cloneNode()
这个方法可以对一个标签元素进行克隆,它只有一个参数:true或false
- true表示连同该元素的所有内容一起克隆
- false表示仅仅克隆这个标签本身
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content"><p>活到老学到老</p></div>
<button onclick="clone()">克隆p标签</button>
</body>
<script>
function clone(){
var divObj = document.getElementById('content');
var pObj = divObj.firstChild;
var newP = pObj.cloneNode(true);
divObj.appendChild(newP);
}
</script>
</html>
4、getAttribute() 和 setAttribute()
getAttribute()方法可以获取到某个属性的值
setAttribute()方法可以修改或设置某个属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content" name="知数SEO">建站优化专家</div>
<button onclick="attribute()">获取和设置div的属性</button>
</body>
<script>
function attribute(){
var divObj = document.getElementById('content');
console.log(divObj.getAttribute('name')); // 知数SEO
divObj.setAttribute('name','知数网络');
console.log(divObj.getAttribute('name')); // 知数网络
divObj.setAttribute('new','新添加属性');
console.log(divObj.getAttribute('new')); // 新添加属性
}
</script>
</html>
5、getAttributeNode() 和 setAttributeNode()
这两个方法操作的属性节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content" name="知数SEO">建站优化专家</div>
<button onclick="attribute()">获取和设置div的属性</button>
</body>
<script>
function attribute(){
var divObj = document.getElementById('content');
console.log(divObj.getAttributeNode('name')); // name = '知数SEO'
var newObj = document.createAttribute('new');
newObj.value = '这是新属性';
divObj.setAttributeNode(newObj);
console.log(divObj.getAttributeNode('new')); // new='这是新属性'
}
</script>
</html>
6、removeAttribute() 和 removeAttributeNode()
removeAttribute()方法可以直接删除某个属性
removeAttributeNode()方法则不可以,我们要先通过getAttributeNode()方法获取到某个属性节点,才能使用这个方法删除这个得到的属性节点,而且返回这个删除的属性节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content" name="知数SEO" age="8">知数SEO</div>
<button onclick="remove()">删除属性</button>
<button onclick="removeNode()">删除属性节点</button>
</body>
<script>
var divObj = document.getElementById('content');
function remove(){
divObj.removeAttribute('name');
console.log(divObj);
}
function removeNode(){
var age = divObj.getAttributeNode('age');
var res = divObj.removeAttributeNode(age);
console.log(res);
console.log(divObj);
}
</script>
</html>
7、removeChild()
这个方法经常用到,他可以删除元素节点中的某个子节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li></ul>
<button onclick="remove()">删除子节点</button>
</body>
<script>
var ulObj = document.getElementById('content');
function remove(){
ulObj.removeChild(ulObj.firstChild);
}
</script>
</html>
8、replaceChild()
这个方法可以用一个新的节点替换某一个子节点,它有两个参数:
- 参数1:一个新的节点
- 参数2: 要替换的子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li><li>列表3</li></ul>
<button onclick="rep()">替换子节点</button>
</body>
<script>
function rep(){
var ulObj = document.getElementById('content');
var first = ulObj.childNodes[1];
var newObj = document.createTextNode('新的文本节点');
first.replaceChild(newObj,first.childNodes[0]);
}
</script>
</html>
9、getElementByTagName()
这个方法可以获取某个元素下所有的指定的标签元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
</head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li><li>列表3</li></ul>
<button onclick="getTags()">获取所有li标签</button>
</body>
<script>
function getTags(){
var ulObj = document.getElementById('content');
var liList = ulObj.getElementsByTagName('li');
console.log(liList);
}
</script>
</html>