标签：document console log DOM 模型 new div 文本 节点
DOM文档对象模型
DOM节点的分类
<div class="" id="">我是div</div>
// 1.Dom节点分类
// 文本节点 ==> 我是div 所有标签显示的内容
// 属性节点 ==> class id 所有标签里面的属性
// 元素节点 ==> div 所有的标签
节点的获取
document.getElementById //通过id获取
document.getElementsByClassName //通过类名获取
document.getElementsByName // 通过name获取
document.getElementsByTagName // 通过标签名获取
document.querySelector // 获取第一个
document.querySelectorAll //获取所有
document.body //获取body
节点的属性
<script>
// 元素具备的属性
// id className style
// id 获取对应的id (设置)
// className 获取对应的class名
// style 获取样式(设置)
// title 获取title属性
// innerHtml 获取显示的内容(设置,包含html内容)
// innerText 获取显示的文本(设置,不包含html内容)
</script>
<body>
<div class="box" id="innerbox" name="hz"></div>
<script>
let div = document.querySelector("div")
// 获取所有的元素节点 返回的是一个伪数组
console.log(div.attributes)
console.log(div.attributes.length)
// 通过下标获取对应的属性节点
let id = div.attributes[1]
// 通过key键值获取对应的属性节点
console.log(div.attributes["id"])
console.log(id)
// 节点的几个属性 nodeName nodeType nodeValue
console.log(id.nodeName)
console.log(id.nodeType)
console.log(id.nodeValue)
</script>
</body>
元素节点的方法
<div title="text"></div>
<input type="text" placeholder="password">
<a href="http://4399.com"></a>
<script>
let div = document.querySelector("div")
// 获取
console.log(div.getAttribute("title"))
// 移除
div.removeAttribute("title")
// 增加,修改
div.setAttribute("class","box")
div.setAttribute("id","hz")
// .语法获取自带的属性
console.log(document.querySelector("input").value)
console.log(document.querySelector("input").type)
console.log(document.querySelector("input").placeholder)
console.log(document.querySelector("a").href)
</script>
节点操作的方法
// 创建元素节点 createElement("标签名")
let new_div = document.createElement("div")
// 创建属性节点 createAttribute("class")
let cla = document.createAttribute("属性名")
// 设置属性节点
cla.value = "box"
// 创建文本节点 createTextNode("文本内容")
let text = document.createTextNode("这是一段文本")
// 给new_div设置属性 setAttributeNode
new_div.setAttributeNode(cla)
// 给new_div添加子节点
new_div.appendChild(text)
// 把new_div添加到body里面
// document.body.appendChild(new_div)
let newEle = document.createElement("div")
document.body.appendChild(newEle)
let span = document.createElement("span")
let p = document.createElement("p")
// insertBefore(新元素,旧元素)在某某之前添加
new_div.insertBefore(p,text)
// appendChild() 在后面追加
new_div.appendChild(span)
document.body.appendChild(new_div)
// 全部移除 remove()
newEle.remove()
// 移除对应的子节点 removeChild)
new_div.removeChild(p)
// 替换对应的子节点 replaceChild(元素,要替换的元素)
new_div.replaceChild(p,span)
// 全部替换 replaceChildren()
new_div.replaceChildren("a")
this指向
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
</body>
<script>
// this 指向调用者本身
var btn = document.querySelectorAll("button");
console.log(btn);
for (var i = 0; i < btn.length; i++) {
console.log(i);
btn[i].onclick = function () {
console.log(this);
};
}
setTimeout(() => {
console.log(this); // 指向window
}, 1000);
</script>
克隆
<button>浅克隆</button>
<button>深克隆</button>
<div class="box">
<div class="inner"></div>
</div>
<script>
var oBtns = document.querySelectorAll("button");
var oBox = document.querySelector(".box");
//浅克隆: 只会克隆自身结构,不会克隆子节点
oBtns[0].onclick = function () {
var cloenDiv = oBox.cloneNode(false);// false浅克隆
//把克隆的div,添加到body里
document.body.appendChild(cloenDiv)
}
//深克隆
oBtns[1].onclick = function () {
var cloenDiv = oBox.cloneNode(true);//
//把克隆的div,添加到body里
document.body.appendChild(cloenDiv)
}
</script>
子元素节点
<ul id="box">
<li>我是第01个li</li>
<li>我是第02个li</li>
<li>我是第03个li</li>
<li>我是第04个li</li>
<li>我是第05个li</li>
</ul>
<script>
// document.querySelectorAll
// document.getElementsByTagName()
// document.querySelector()
var oBox = document.querySelector("#box");
//获取第一个儿子
var ele = oBox.firstElementChild || oBox.firstChild;
ele.style.backgroundColor = "red";
ele.style.borderRadius = "5px";
//最后一个儿子
var ele = oBox.lastElementChild || oBox.lastChild;
ele.style.backgroundColor = "pink";
//获取指定的某一个
oBox.children[2].style.backgroundColor = "green";
</script>
父节点
<div class="box">
<div class="inner"></div>
</div>
<script>
//parentNode 顶级是 document
//parentElement顶级是null
// var oBox = document.querySelector(".box");
var oInner = document.querySelector(".inner");
//找父节点 找'亲'父亲
// console.log(oInner.parentNode);
// oInner.parentNode.style.backgroundColor = "pink";
// oInner.parentElement.style.backgroundColor = "green";
console.log(oInner.parentNode.parentNode.parentNode.parentNode);//document
console.log(
oInner.parentElement.parentElement.parentElement.parentElement
);//null
兄弟节点
nextSibling // 后一个
previousSibling //前一个
标签：document,console,log,DOM,模型,new,div,文本,节点 来源： https://www.cnblogs.com/2323-qq/p/16349769.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。