第10章 DOM 10.1节点层次
10.1.1 node类型
1 nodeName和nodeValue属性
2 节点关系
<body>
<div class="container" id="div">
<p id="p">hello</p>
<div class="div1" id="div1"></div>
</div>
<script>
let div = document.getElementById("div")
console.log(div.nodeType === 1) //true
console.log(div.nodeValue) //null
console.log(div.nodeName) //DIV
console.log(div.childNodes) //类数组NodeList(5) [text, p#p, text, div#div1.div1, text]
let firstnode = div.firstChild //#text
let lastnode = div.lastChild //#text
console.log(firstnode == div.childNodes[0]) //true
let nodelist = div.childNodes
//变成数组 arr1,arr2 es6 arr3 es5
let arr1 = [...nodelist]
let arr2 = Array.from(nodelist)
let arr3 = Array.prototype.slice.call(nodelist, 0)
let div1 = document.getElementById("div1")
console.log(div1.parentNode) //父节点div
console.log(div1.previousSibling) //#text 前一个兄弟节点
console.log(typeof div1.nextSibling) //#text 后一个兄弟节点
</script>
</body>
3 操作节点
<body>
<div class="container" id="div">
<p id="p">hello</p>
<div class="div1" id="div1"></div>
</div>
<script>
//操作节点
let div = document.getElementById("div")
let newnode = document.createElement("p")
//增加节点，新节点添加到了childlist的末尾
let nnode = div.appendChild(newnode)
console.log(nnode == div.lastChild) //true
//添加到特定位置,接受两个参数，一个新节点，一个参照节点
let insert = div.insertBefore(newnode, div.firstChild)
////替换节点 替换原有节点
let replace = div.replaceChild(newnode, div.lastChild) //如果新节点已经在dom树中，就直接移到新位置上
//移除节点
let remove = div.removeChild(newnode)
//克隆节点
let shallowclone = div.cloneNode(false)
shallowclone.length//0
let deepclone = div.cloneNode(true)
deep.length//5
</script>
</body>
10.1.2 Document类型
1 文档的子节点
<body>
<div class="container" id="div">
<p id="p">hello</p>
<div class="div1" id="div1"></div>
</div>
<script>
//ducument类型
let nodetype = document.nodeType //9
let nodevalue = document.nodeValue //null
let parentnode = document.parentNode //null
let ownerdocument = document.ownerDocument //null
//快速获取html元素
let html = document.documentElement
//快速获取body
let body = document.body
//获取DOCTYPE引用
let doc = document.doctype //ie8之前是null
console.log(document.childNodes[0] === doc) //true
console.log(document.firstChild == doc) //true
</script>
</body>
2 文档信息
设置document.domain只可以往松散方向设置
<body>
<div class="container" id="div">
<p id="p">hello</p>
<div class="div1" id="div1"></div>
</div>
<script>
let title = document.title //获取页面标题
document.title = "new title" //修改页面标题
let url = document.URL //获取页面URL
let domain = document.domain //获取页面域名
let referer = document.referrer //获取页面来源页的地址
console.log(url)
console.log(domain)
console.log(referer)
</script>
</body>
3 查找元素
<body>
<div class="container" id="div">
<!-- hello -->
<p id="p">hello</p>
<div class="div1" id="div1"></div>
<div class="div2" id="div2"></div>
<img src="url" alt="" name="myimg">
</div>
<script>
let div = document.getElementById("div")
let divs = document.getElementsByTagName("div") //HTMLCollection对象 类数组
console.log(divs[0].nodeName.toLowerCase()) //div
let len = divs.length //3
let item1 = divs.item(1) //访问元素
let item2 = divs[2]
let imgs = document.getElementsByTagName("img")
let myimge = imgs.namedItem("myimg") //根据name属性找元素
let myimage = imgs["myimg"]
let img = document.getElementsByName("myimg")
let all = document.getElementsByTagName("*")
console.log(all) //chrome无注释节点
</script>
</body>
5 DOM一致性检测
let has = document.implementation.hasFeature("XML", "1.0")
console.log(has) //true
6 文档写入
<body>
<div class="container" id="div">
<!-- hello -->
<p id="p">the time is :</p>
</div>
<script>
document.write(new Date().toString()) //页面显示时间
document.writeln("hello hello") //区别是是否换行？只在后面加了一个空格，在网页显示中并没有换行
window.onload = function () {
document.write(new Date().toString()) //页面将被重写
}
</script>
</body>
10.1.3 Element类型
1 html元素
标准特性：id,title,dir,classname,lang 5个
2 取得特性
<body>
<div class="container" id="div" dir="ltr" title="mytitle" lang="en" myattr="hello">
<p id="p" title="hello">the time is :</p>
</div>
<script>
let div = document.getElementById("div")
let id = div.getAttribute("id")
let title = div.getAttribute("title")
let myattr = div.getAttribute("myattr") //可以获取自定义的特性
console.log(myattr)
console.log(title)
</script>
</body>
3 设置特性
let newclass = div.setAttribute("class", "bb")
console.log(div.getAttribute("class"))
4 移除特性
div.removeAttribute("class")
5 attributes属性
<body>
<div class="container" id="div" dir="ltr" title="mytitle" lang="en" myattr="hello" name="mydiv">
<p id="p" title="hello">the time is :</p>
</div>
<script>
let div = document.getElementById("div")
let name = div.attributes.getNamedItem("name").nodeValue //获取name特性的值
div.attributes.getNamedItem('name').nodeValue = 'newname' //设置新的值
console.log(div.getAttribute("name")) //newname'
let res = div.attributes.removeNamedItem('name') //移除特性 返回的是name="newname"
let res1 = div.removeAttribute("class") //undefined
div.attributes.setNamedItem() //?不知道怎么传参
console.log(div)
</script>
</body>
6 创建元素
<script>
let newp = document.createElement("p")
newp.id = "newp"
newp.innerHTML = "this is newp"
document.body.appendChild(newp)
console.log(document.body.childNodes)
</script>
第11章 DOM拓展
11.1 选择符API
11.1.1 querySelector()方法
匹配的是css选择符
<body class="page1">
<div class="container" id="div" dir="ltr" title="mytitle" lang="en" myattr="hello" name="mydiv">
<p id="p" title="hello">the time is :</p>
<div class="div1"></div>
</div>
<script>
let div = document.querySelector("div")//返回第一个
let divs = document.querySelectorAll("div") //返回的是NodeList对象
console.log(div)
console.log(divs)
console.log(document.body.webkitMatchsSelector(".page1")) //true 查看元素是否匹配一个选择符
</script>
</body>
11.2 元素遍历
<body class="page1">
<div class="container" id="div" dir="ltr" title="mytitle" lang="en" myattr="hello" name="mydiv">
<p id="p" title="hello">the time is :</p>
<div class="div1"></div>
</div>
<script>
let childlist = document.body.childNodes //直接子元素 5个 三个#text
let elchildlen = document.body.childElementCount //2
let firstElChild = document.body.firstElementChild //div
let lastElChild = document.body.lastElementChild //script
let previouse = document.body.previousElementSibling //head
let next = document.body.nextElementSibling //null
</script>
</body>
11.3 HTML5
11.3.1 与类相关的扩充
1 getElementsClassName()方法
在document上面调用会匹配到所有，在元素上调用只会在后代中找。
<body class="page1">
<div class="container" id="div" dir="ltr" title="mytitle" lang="en" myattr="hello" name="mydiv">
<p id="p" title="hello">the time is :</p>
<div class="div1"></div>
</div>
<script>
let div = document.getElementsByClassName("container") //HTMLCollection
console.log(div)
</script>
</body>
2 classlist
- add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
- contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。 这样，前面那么多行代码用下面这一行代码就可以代替了：
