思维导图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="idh" style="color:red">dd</h1>
<div id="div1" style="myStyle" title="abc" myAttribute="att" ></div>
</body>
<script src="js05Element.js"></script>
</html>
Html页面中只有两个自己写的元素节点,id为“idh”的h1节点，和一个id为"div1"的节点。
接下去要查询Element本身的信息，取得对象的属性，设置属性，创建元素，并插入到文档树中。
一、HTML元素
console.log(Object.getPrototypeOf(Element));//f Node
let element1= document.getElementById('div1');
console.log(element1);
console.log(element1.nodeType);//1,Element,代表元素
console.log(element1.nodeName);//DIV
console.log(element1.tagName);//DIV
//nodeName与tagName等价
console.log(element1.nodeValue);//Null
console.log(element1.parentNode.nodeType);//父亲节点的类型，1Element元素，也可以是Document对象
element1ID=element1.id;
element1Title= element1.title;
element1Lang = element1.lang;
element1Dir = element1.dir;//书写方向
element1className = element1.className;//指定元素的css类
console.log(element1ID);
console.log(element1Title);
查看原型，nodeType, nodeName等属性，用对象名.属性名查询div1的相关属性
二、取得属性、设置属性
//取得属性，其实得到的结果和上面差不多
//getAttribute(),传入要查询的参数
console.log(element1.getAttribute("id"));
//查询自定义的属性
console.log(element1.getAttribute("myAttribute"));//att
//属性名不分大小写
console.log(element1.getAttribute("MYATTRIBUTE"));//att
console.log(element1.style);
console.log(element1.getAttribute("style"));//myStyle
//设置属性 setAttribute,也可以自定义属性
element1.setAttribute("newAttribute","xyz");
console.log(element1.getAttribute("newAttribute"));
三、attributes属性
//attributes属性
let elementid = element1.attributes.getNamedItem("id");
console.log(elementid);//id="div1"
console.log(elementid.nodeValue);//div1
console.log(elementid===element1.attributes["id"]);
//等价 let elementid = element1.attributes["id"]
//这里对比getAttribute()
console.log(element1.getAttribute("id"));//div1
console.log(element1.id);//div1 返回值
console.log(typeof element1.id);//string 返回一个字符串
console.log(typeof elementid);//object
//区别在于 getNamedItem(name) 属性名=‘属性’ 返回一个对象 属性=“值”
element1.newAtt="123";
//设置属性的值
element1.attributes["id"].nodeValue="newId";
element1.id='id123';
console.log(element1.newAtt);//newid
console.log(element1);
//之前使用element1.id='id123'修改id属性，id是id123,而不是newId
这里不仅使用了attributes属性，与其他获得属性的方法进行了对比
四、创建元素
创建元素要用到:document.createElement(“元素名”)
再用appenChild() 、insertBefore() 、replaceChild()将新创建的元素添加到文档的body中
在最初的时候，我在html文档中放入了一个id为div1的div元素，里面是空的。在上面的操作中，我用
let element1 = document.getElementById("div1");
获取了这个节点，用element1表示，现在，我想在这个div中放入一个红色的标题，标题的内容是“abc”。
那么节点的父子关系是这样的：element1->h1>text
所以要用到两次appendChild()，现在element1下面放个儿子h1，再在h1下面放text。
代码如下。
//创建元素
let newH1 = document.createElement("h1");
newH1.id="newh1";//h1的id是newh1
newH1.style="color:blue";//h1的颜色是蓝色
let newText =document.createTextNode("abc");//文本内容
element1.appendChild(newH1);
newH1.appendChild(newText);
刷新页面后的效果，就有了一个蓝色的abc
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
