js 怎么获取body中的所有元素 不只是body的子元素,还有子元素的子元素

JavaScript017

js 怎么获取body中的所有元素 不只是body的子元素,还有子元素的子元素,第1张

两种方式:

第一种纯js,使用递归:

<script>

/*

*第一个参数为页面元素对象或者数组

*第二个参数为回调函数【回调函数默认传递一个函数,即当前对象】

*/

function Each(obj,fun){

if('function'!==typeof(fun) || !obj){

return false

}

if('undefined'!==typeof(obj.length)){

for(var i=0i<obj.lengthi++){

var o=obj[i]var r=fun(o)||true

if(r===true){

r=Each(o.children,fun)

if(!r) return false

}

}

}else{

var r=fun(obj)||true

if(r===true){

r=Each(obj.children,fun)

if(!r) return false

}

}

}

</script>

用法:

//

Each(document.getElementsByTagName("body"),function(obj){

if(obj.nodeName==="UL")//obj为当前遍历到的对象

return false//如果返回false就会停止遍历

alert(obj.nodeName)

})

第二种方法,使用jquery:

$("body *").each(function(i, obj){

alert( "Item #" + i + ": " + obj )

})

1、document.body.clientWidth//网页可见区域宽

2、document.body.clientHeight//网页可见区域高

3、document.body.offsetWidth//网页可见区域宽(包括边线的宽)

4、document.body.offsetHeight//网页可见区域高(包括边线的高)

5、document.body.scrollWidth//网页正文全文宽

6、window.screen.availHeight//屏幕可用工作区高度

7、window.screen.availWidth//屏幕可用工作区宽度

8、alert($(document.body).outerWidth(true))//浏览器时下窗口文档body的总宽度 包括border padding margin

9、alert($(document.body).width())//浏览器时下窗口文档body的高度

扩展资料:

1、alert($(window).height())//浏览器时下窗口可视区域高度

2、alert($(document).height())//浏览器时下窗口文档的高度

3、alert($(document.body).height())//浏览器时下窗口文档body的高度

4、alert($(document.body).outerHeight(true))//浏览器时下窗口文档body的总高度 包括border padding margin

5、alert($(window).width())//浏览器时下窗口可视区域宽度

6、alert($(document).width())//浏览器时下窗口文档对于象宽度

7、alert($(document).scrollTop())//获取滚动条到顶部的垂直高度

8、alert($(document).scrollLeft())//获取滚动条到左边的垂直宽度

我写了代码如下, 测试可行, 供参考:

//主要靠这个函数实现: 将body下的文本节点中的searchWord, 替换为replaceWord

function replaceBodyText(searchWord, replaceWord){

    var reg = new RegExp(searchWord, 'g')

    function replaceNode(node){

        node.childNodes.forEach(function(v){

            if(v.nodeName === 'SCRIPT')

                return //排除<script>标签

            if(!v.hasChildNodes()){

                if(reg.test(v.textContent))

                    v.textContent = v.textContent.replace(reg, replaceWord)

                return

            }

            replaceNode(v)

        })

    }

    replaceNode(document.body)

}

//绑定一个事件测试用, 点击这个按钮后才会执行

document.querySelector('#testBtn').addEventListener('click', function(){

    replaceBodyText('中国', '美国')

})

//实际使用中直接调用函数即可:

//以下语句表示将所有文本节点中的"中国"替换为"美国:

//replaceBodyText('中国', '美国')