DMO简介和DOM操作（二）

节点的获取、设置和删除
1.获取节点

元素节点.getAttribute（属性名）

2.设置节点

元素节点.setAttribute（属性名，新的属性值）

3.删除节点

元素节点.removeAttribute (属性名)

<body><div id="d1">helloWorld</div><script type="text/javascript">var d1 = document.querySelector("#d1")//获取属性值console.log(d1.id)console.log(d1['id'])console.log(d1.getAttribute('id'))//设置属性d1.id = "d2"d1['id'] = "d3"//setAttribute("属性名称","属性值")d1.setAttribute("id","d4")d1.abc="789"//默认元素中如果没有此属性，那么此属性只会创建在对象中，不会显示在html上console.log(d1)console.log([d1])d1.setAttribute("aaa","666")//默认元素中如果没有此属性，那么此属性不会创建在对象中个，会显示在html上console.log(d1)console.log([d1])//删除子元素d1.removeAttribute("abc")</script></body>

innerHtml和innerText的区别

value：标签的value属性

 <div id="d1">helloword<h1>helloword</h1><h1>helloword</h1></div><input type="text" name="username" id="username" value="admin"/><input type="password" name="password" id="password" value="123456"/><script type="text/javascript">var usernameInput = document.querySelector('#username')var username = usernameInput.value;console.log(username)//adminvar passwordInput = document.querySelector("#password")var password = passwordInput.valueconsole.log(password)//123456</script>

innerHtml：双闭合标签里面的内容（识别标签）
innerText：双闭合标签里面的内容（不识别标签）

<div id="d1">helloword<h1>helloword</h1><h1>helloword</h1></div><script type="text/javascript">var d1 = document.querySelector('#d1')//获取的d1内部的html代码console.log(d1.innerHTML)//获取d1内部的文本内容console.log(d1.innerText)//获取包含d1的html代码console.log(d1.outerHTML)</script>

DOM操作设置元素样式

1.通过style修改属性样式
2.通过className修改属性样式
3.通过增加style标签来修改样式

<div id="d1">hello</div><div id="d2" >hello</div><div class="d3" >hello</div><script type="text/javascript">//1.通过style修改属性样式var abc1 = document.querySelector('#d1')abc1.style.width= "200px";abc1.style.height= "200px";abc1.style.backgroundColor= "red";//设置css属性时，如果css属性是多个单词组成，则采用驼峰命名法//注意：通过style属性设置的值，优先级是最高的，因为是直接修改标签的style属性//2.通过className修改属性样式var abc2 = document.querySelector('#d2')abc2.className = "bg bigFont"//类名还可以通过classList属性的add/remove/replace进行修改classNameabc2.classList.add("shaow")abc2.classList.replace("bigFont","smallFont")abc2.classList.remove("bg")//3.通过增加style标签来修改样式var style=document.createElement("style")//反引号``可以包括多行字符串style.innerHTML= `.d3{width: 800px;height: 800px;background-color: orange;}`var body = document.querySelector("body")body.appendChild(style)

DMO简介和DOM操作（二）相关推荐

Python学习 Day 046 - DOM 操作二
主要内容: 1.DOM的操作(创建,追加,删除) 2.js中的面向对象 3.定时器 1. DOM的操作(创建,追加,删除) (1)DOM节点的获取 parentNode 获取父级标签 nextElem ...
JavaScript（五）—— Web APIs 简介/JavaScript 必须掌握的 DOM 操作 (丰富案例 + 思维导图）
本篇为 JavaScript 系列笔记第五篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）
文章目录系列目录原项目地址第37课:并发编程在爬虫中的应用单线程版本多线程版本异步I/O版本总结第38课:抓取网页动态内容 Selenium 介绍使用Selenium 加载页面查找 ...
JavaScript(二)之DOM 操作
JavaScript之DOM 操作一.DOM 获取二.添加元素三.修改元素四.删除元素五.Web Storage 六.定时任务和延时操作一.DOM 获取文档对象模型简称 DOM,DO ...
jQuery基础二DOM操作
DOM:Document Object Model的缩写,中文是文档对象模型,根据W3C DOM规范(htttp://www.w3.org/DOM ),它是一种与浏览器.平台.语言无关的接口,该接口可 ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
04-前端技术_ javaScript内置对象与DOM操作
目录五,javaScript内置对象与DOM操作 1,JavaScript对象定义和使用 2,JavaScript内置对象 2.1 Array数组 2.1.1 创建方式 2.1.2 常用属性: 2. ...
DOM操作HTML（JS加强）
DOM简介和解析HTML DOM 文档对象类型 Document Object Model 文档:标记型文档(HTML/XML) 对象:封装属性和行为(方法) 模型:共同特征的体现. DOM解析HT ...

DMO简介和DOM操作（二）

DMO简介和DOM操作（二）

DMO简介和DOM操作（二）相关推荐

最新文章

热门文章